如何更改頁面調整大小（jQuery）的左側屬性

我對代碼有輕微的麻煩。我想要做的是使這些元素的CSS屬性'左'更新根據它當前左值的差異和頁面調整的大小。這樣，當頁面調整大小和背景移動時，元素也會移動。看看下面的代碼，我會說明問題：如何更改頁面調整大小（jQuery）的左側屬性

$(window).resize(function() { 
    var docWidth = $(window).width(); 
    if (docWidth < 1000) { 
     var difference = 1000-docWidth; 
     $('#headNav a,#icons div').each(function() { 
      var left = $(this).position().left; 
      var newLeft = left - difference; 
      $(this).css({ 'left' : newLeft }); 
     }); 
    } 
});

讓我得到這個問題是被賦予野生號留下數值的元素，而變「的值newLeft '是合理的，理想的價值。我認爲每個函數都會收集這些值的總和，併爲每個元素運行它們x所發現元素的存在次數（所以如果有5個元素，它會運行5次，我的意思是。）我想要的是執行這些代碼每個元素獨特，但每個元素只有一次，而不是每個元素10次！（這是HTML中有多少元素）。

所以我的問題是，這是如何實現的？我希望我解釋得很清楚，這很難迭代。任何幫助非常感謝。謝謝！

來源

2011-07-13 Sawyer Altman

只是在黑暗中的一槍，但沒有jQuery糾正丟失的單位？（也就是說，如果包含「px」字符串，它會有所作用嗎？） – sdleihssirhc

是的。不過謝謝你的迴應。 ;） –

試試這個：

$(window).resize(function() { 
    var docWidth = $(window).width(); 
    if (docWidth < 1000) { 
     var difference = 1000-docWidth;    
     $('#headNav a,#icons div').each(function(iconInst) { 
      var left = $("#" + iconInst).position().left; 
      var newLeft = left - difference; 
      $("#" + iconInst).css({ 'left' : newLeft }); 
     }); 
    } 
});

來源

2011-07-13 03:27:11 Cruz

啊，我明白你在那裏做了什麼。非常聰明。我做了一些小修改（由於語法），現在我比以前更加接近（儘管還沒有完成）。謝謝！ –

添加了詳細信息：每次調用調整大小函數時，代碼都正在執行。有沒有辦法讓它只能運行一次，並覆蓋，而不是持續複合呢？謝謝。 –

這裏有一個有趣的把戲：你.css()調用包括+=：

$(this).css({left: "+=" + difference});

jQuery不會數學，爲您獲得新的價值。

來源

2011-07-13 03:31:46 gilly3

有趣的消息，謝謝！ –

如何更改頁面調整大小（jQuery）的左側屬性

回答

相關問題