1

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

$('.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 支持自定义属性，但我宁愿在头部的某处声明这些内容以及有关元素的其他信息。
关于如何做到这一点的任何建议？

谢谢！

4

2 回答 2

2

你不能用 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
});

希望这会有所帮助。

于 2012-04-06T08:05:25.623 回答
1

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

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

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

parseInt($(this).data('speed'), 10);
于 2012-04-06T08:04:40.437 回答