在浏览器窗口调整大小时改变JS逻辑

随着使用CSS @media查询的流行程度，我们现在可以根据查看它们的分辨率对网页进行样式设置。调整浏览器窗口大小时，将依赖宽度的样式/布局。在CSS中，这很简单，例如在浏览器窗口调整大小时改变JS逻辑

// The heart of "responsive design." 
@media screen and (max-width: 1000px) { ... }

在响应式设计的精神中，我们可以根据分辨率变化随时调整JavaScript逻辑吗？例如，如果我们每10秒输出一个数字“5”的脚本，当浏览器窗口调整为< 300px时，我们可以将其更改为输出“7”（以相同的间隔）？

// Default script 
setTimeout(function() { 
    var i = 5; 
    console.log(i); 
}, 10000); 

// How to change the value of i to 7, upon window resize? 
// Ideally, without a page reload.

来源

2012-08-06 moey

如果您好奇，我试图修改显示3张图片缩略图的旋转木马滑块脚本，并显示下一个按钮。点击该按钮将推进3个缩略图。现在，在小屏幕上查看时，我只想显示1个缩略图;并且，下一个按钮应该每次前进1个缩略图。 – moey 2012-08-06 14:53:25

你不能准确地通过CSS & JS之间的变量，但使用Javascript公开resize的事件，你可以绑定到window。

例如：

function (event) { 
    if (event.srcElement.outerWidth <= 1000){ 
    // do something 
    } 
}

Working JSFiddle Demo

来源

2012-08-06 14:47:43 briangonzalez

处理的window.resize事件：

window.onresize = function() { 
    // check if the new height/width is <300 
    // change your i variable 
};

为了这个工作，你i变量必须在一个范围是通过调整大小处理程序共享和匿名传递给setTimeout。

答案为Getting window height/width。

来源

2012-08-06 14:50:37 jbabey

如果你想要的是表现出许多（基于含），每10秒，在这段代码是：

setInterval(function() { 
    var num = (window.outerWidth <= 300) ? 7 : 5; 
    console.log(i); 
}, 10000);

如果你想要的是显示数字时，窗口大小@jbabey回答说，你应该处理window.reseize事件。

来源

2012-08-06 14:53:57 Diego

在浏览器窗口调整大小时改变JS逻辑

回答

相关问题