自定义 CSS 属性还是 HTML 属性？

Question

我正在试验视差滚动，我想做类似的事情：

$('.page').each(function() {
    $(this).css("background-position", 
        "center " + ((window.pageYOffset - $(this).offset().top) /
                     $(this).css("speed")) + "px");
});

其中 speed 是分配给特定项目的属性，用于控制项目在滚动期间的移动速度。 所以我会有类似的东西：

#item { speed: 4; }

和

<div name="item" class="page"></div>

我知道CSS可能无法做到这一点。 HTML5 支持自定义属性，但我宁愿在头部的某处声明这些东西以及有关该元素的其他信息。
有关如何执行此操作的任何建议？

谢谢！

Answer 1

你不能用 CSS 做到这一点。但是你可以使用 HTML5 自定义属性，如果你想在 header 中声明所有内容，正如你在问题中所说的，你可以使用 jQuery 自己的方法将数据绑定到元素：

$(document).ready( function(){
    $.data(selector,'speed',5);
    alert($.data(selector,'speed')); //this will alert 5 now
});

文档在这里： http://api.jquery.com/jQuery.data/

这个也应该有效： http://api.jquery.com/data/ - 代码在这里看起来有点不同：

$(document).ready( function(){
    $(selector).data('speed',5);
    alert($(selector).data('speed')); //this will alert 5 now
});

希望有帮助。

Answer 2

具有自定义data-属性的 HTML5：

<div name="item" class="page" data-speed="4"></div>

在循环中使用 jQuery 的data()方法：

parseInt($(this).data('speed'), 10);