关于如何编写window.resize函数的一些建议？

我试图编写一个函数，调整浏览器窗口调整大小时的一些元素的CSS宽度，现在我似乎没有得到正确的东西，并会喜欢它，如果有人可以帮我在哪里我出错了，我的到目前为止的代码是：关于如何编写window.resize函数的一些建议？

function windowResize() { 
      $('#content').css('width', $windowWidth); 
      $('#div.mySection').css('width', $windowWidth); 
      $('#div.mySection .story').css('width', $windowWidth); 
     } 

$(document).ready(function() { 

      var $windowWidth = $(window).width();    

      $(window).resize(function() { 
       windowResize(); 
      }); 

     });

林不知道我是否已经放置在其正确位置的一切，如果有人能对我怎么能做出这样的代码更好的将是巨大的告诉我。

感谢凯尔

来源

2011-09-14 styler

你的问题是什么？ – TJHeuvel

您将需要重新计算window在调整窗口大小时运行的函数的新维度;否则，你将以相同的宽度重复永久。（顺便说一句，你$windowWidth变量是你的windowResize功能，这就是为什么它没有被现在使用的范围之外。）

function windowResize() { 
     var windowWidth = $(window).width(); 
     $('#content').css('width', windowWidth); 
     $('#div.mySection').css('width', windowWidth); 
     $('#div.mySection .story').css('width', windowWidth); 
    } 

$(document).ready(function() { 

     var $windowWidth = $(window).width();    

     $(window).resize(function() { 
      windowResize(); 
     }); 

    });

按照惯例，存储的jQuery对象变量与$前缀，所以我删除从windowWidth，这是一个普通的旧号码。

现在，下面是您的代码的注意事项：resize在某些浏览器中持续发生，这意味着您将持续运行您的处理程序，这可能是一件非常糟糕的事情。给Ben Alman's throttle/debounce plugin一试;它会限制您的处理程序被调用的次数，在给定的时间间隔内“执行”删除或“限制”执行一次。这样，您就可以达到效果，而不会将垃圾邮件大小调整为DOM元素（这可能很痛苦，并且是锁定用户界面的好方法）。

来源

2011-09-14 15:10:03 ajm

谢谢@ajm我将如何在代码中包含这个油门或去抖动？ – styler

你会从Ben Alman的站点下载插件，像其他任何jQuery插件一样包含它，然后像下面这样绑定到'window.resize'：'$（window）.resize（$。throttle（100，windowResize）） '。你可以将这个100毫秒的值调整为任何你喜欢的。 '.debouce'被调用的方式相同，但工作方式稍有不同。检查文档以查看最适合您的文档。 – ajm

你缓存$windowWidth曾经那么它永远是相同的值。在windowResize函数的开头部分内移动var $windowWidth = $(window).width();，您的代码将起作用。

来源

2011-09-14 15:05:01 mVChr

我会尝试这样的：

window.onresize = function(){ 
    var width = $(window).width(); 
    $('#content').css('width', width); 
    $('#div.mySection').css('width', width); 
    $('#div.mySection .story').css('width', width); 
}

无需包装这为domready中功能或使用jQuery附加事件（但这样做不应该是一个问题）。

你没有说明究竟是什么问题（不是事件被解雇？你得到错误的结果？），但最主要的改变是在resize函数内部进行宽度计算（否则只会计算一次，并重新设置变量，这将不会有任何影响）。

来源

2011-09-14 15:06:42 oezi

双分号（';;'）是故意的吗？ –

这只是一个错字，感谢提示。 – oezi

关于如何编写window.resize函数的一些建议？

回答

相关问题