Question

我有一个具有水平jquery图像轮播的项目。该网站是响应性的，并且旋转木马需要使图像在某个屏幕宽度处稍微变小。我已经能够在css中实现这一点，但是carousel插件有一些javascript设置，我需要更改以完成响应。我已经弄清楚如何在媒体查询中工作以使javascript在页面加载时适当地更改，但它不适用于调整大小。每次我尝试包含代码来更改图像时调整代码中断的大小。任何人都可以帮我修改这段代码以便调整大小吗？...

<script type="text/javascript">

  $(window).load(function(){

  if (document.documentElement.clientWidth < 860) {

    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 120,
      itemMargin: 5,
      pausePlay: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });
    } 

    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 160,
      itemMargin: 5,
      pausePlay: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });

  });

</script>

Answer 1

<强> Working Fiddle

试试这个;

$(window).resize(function() {
    if (document.documentElement.clientWidth < 860) {
        // scripts here
    }
});

检查出来：

$(window).width() not the same as media query

根据你的评论

<强> Fiddle

var width = $(window).width();
if ((width < 860)) {
alert('Do first action');
} else {
alert('Do Second action');
}

祝你好运！

Answer 2

尝试使用此而不是clientWidth，

if (screen.width < 860) {....}

Answer 3

$(window).resize(function() {
    if (screen.width < 860) {
        // i dont know if Im helping.
    }
});

Answer 4

使用on绑定他们：

$(window).on("load resize",function(){
    // your code
});

修改

尝试使用

$(window).bind("load resize", function(e) { // your code });

或者，不要使用.bind（），而是使用.on（），因为bind直接映射到on（）。

$(window).on("load resize", function(e) { // your code });

function(e)它是event对象。你可以阅读它here

你的最终结果

<script type="text/javascript"> $(window).on("load resize",function(e){ if (document.documentElement.clientWidth < 860) { $('.flexslider').flexslider({ animation: "slide", animationLoop: false, itemWidth: 120, itemMargin: 5, pausePlay: false, start: function(slider){ $('body').removeClass('loading'); } }); } $('.flexslider').flexslider({ animation: "slide", animationLoop: false, itemWidth: 160, itemMargin: 5, pausePlay: false, start: function(slider){ $('body').removeClass('loading'); } }); }); </script>

Answer 5

在window.resize（）函数中使用$（document）.ready（function（）。

我认为问题是@ media-query和window.resize（）不同步。媒体查询完成后， window.resize（）应该可以正常工作。因此在window.resize（）中使用 include $（document）.ready（function（），然后写下你的条件。

css媒体查询和JavaScript

5 个答案: