Question

我正在开发一个基于屏幕大小的两列或单列视图之间的移动Web项目。对于某些设备尺寸，从纵向更改为横向可在单列和双列之间切换。在页面底部有三个并排的特征图像，用于两列视图，但我们希望在单列中变成内容滑块。

我的问题：
当我的屏幕宽度低于某个宽度时，javascript条件我调用了该函数。但是，如果更改屏幕的方向/大小，则不会调用该功能或重新评估屏幕宽度。

我有什么：

if( $(window).width() < 570) { 
    $(window).load(function() { 
        $('.flexslider').flexslider(); 
    }); 
}

在调整大小事件后观察调整大小和调用/调用函数的最佳方法是什么？

Answer 1

在窗口上使用jQuery resize事件。 jsfiddle

$(window).resize(function(){
 //your code

});

Answer 2

要继续Shusl的说法，你需要在$（window）.resize（）;

中创建函数。

我要做的是创建功能并确保也触发它。所以它会像 -

$(window)resize(function() {

    winWidth = $(window).width();
    winHeight = $(window).height();

    if (winWidth < 570) {

       $(window).load(function() { $('.flexslider').flexslider(); });

    }
   else {
      // do something else
   } 

   }).trigger("resize");

调整大小或方向更改后调用或调用功能

2 个答案: