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自定义属性，如果你想在标题中声明所有内容，就像你在问题中所说的那样，你可以使用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);

自定义CSS属性或HTML属性？

2 个答案: