我有这个jQuery插件-Plax:https://github.com/cameronmcefee/plax
我希望它具有响应性,而我有一部分:
我的问题是html属性:
<img src="/parallax/4.svg" data-xrange="20" data-yrange="10" id="plax-img4"/>
<img src="/parallax/3.svg" data-xrange="5" data-yrange="40" id="plax-img3"/>
问题在于
data-xrange
和data-yrange
没有响应,并且当您最小化浏览器窗口时,无论窗口大小如何,它们的x范围和y范围都相同。最小化时,范围会很大。因此,我必须在调整窗口大小时获取窗口的大小,然后使用算法找到xrange和yrange,然后使用jquery更改属性,然后重新初始化plaxify。
我当时在想类似这样的伪代码,但不知道该怎么做才能起作用:
$('#my-element')
.attr('data-xrange', 'New Value')
.attr('data-yrange', 'New Value');
// You can dynamically redefine the range of a layer
// by running plaxify() on it again.
$('#my-element').plaxify();
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && #my-element.is('New Value')) {
#my-element.removeAttr('data-xrange,data-yrange');
}
});
最佳答案
来自Plax的文档:
$('#plax-octocat').plaxify({"xRange":40,"yRange":40})
$('#plax-earth').plaxify({"xRange":20,"yRange":20,"invert":true})
$('#plax-bg').plaxify({"xRange":10,"yRange":10,"invert":true})
$.plax.enable()
$('#my-btn').click(function(){
// bigger range
$('#plax-octocat').plaxify({"xRange":200,"yRange":200}) // LOOK HERE
})
如您所见,如果需要新的xrange和yrange,则必须自己设置。然后,您的代码片段应类似于:
$(window).resize(function(){
var w = $(window).width();
if(w > 320){
$('#my-element').plaxify({"xRange":newValue,"yRange":newValue});
}
});
编辑:
同样,在使用
plaxify()
更改了数据属性之后,您还必须将CSS顶部和左侧的值设置为0。类似这样:http://jsfiddle.net/instead/4kRDL/14/