如何更改页面调整大小（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）的左侧属性

回答

相关问题