HTML的動態變化與jQuery

屬性我有這樣的jQuery插件 - 貝齒：https://github.com/cameronmcefee/plax HTML的動態變化與jQuery

我想這是有求必應，這是我部分有：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-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'); 
       } 
      });

來源

2013-05-20 DWTBC

從貝齒的文件是：

$('#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-20 19:04:10 instead

嘿@instead ....我嘗試了你的建議，但我似乎無法得到它的工作...在我的小提琴，你可以看到我所做的：http://jsfiddle.net/4kRDL/2/ 我會很酷，如果我能得到這個工作 – DWTBC

嘿，我發現，如果你想動態地改變xrange和yrange的值，那麼你必須用javascript編寫它們。
我在本地主機上試過了，你必須在你的代碼中放置：'$（'＃plax-img1'）。plaxify（{「xRange」：40，「yRange」：40，「invert」：true}） ; （'＃plax-img2'）。plaxify（{「xRange」：60，「yRange」：40，「invert」：true}）; plaxify（{「xRange」：5，「yRange」：40，「invert」：false}）; （'＃xxange「：20，」yRange「：10}）;'然後你的onresize事件會起作用 – instead

我試着做你寫的東西，但這只是做效果停止工作？看到提琴：http://jsfiddle.net/4kRDL/3/ – DWTBC

HTML的動態變化與jQuery

回答

相關問題