1

我有这个 jQuery 插件 - Plax：https ://github.com/cameronmcefee/plax

我希望它具有响应性，我部分拥有：http: //jsfiddle.net/4kRDL/

我的问题是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-xrangeanddata-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');
                }
            });
4

1 回答 1

0

它来自 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/

于 2013-05-20T19:04:10.307 回答