jQuery媒体查询

我正在使用一个名为beforeAfter的插件（http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/），并且这种方式已经实现了它，我想只用公司点击甚至在用户使用屏幕时说580px。现在我有它的开发代码，但不确定如何添加媒体查询。jQuery媒体查询

下面是完整的代码 http://jsbin.com/ojuwid/1/

链接这里是在插件文件中的片断，我需要将其纳入媒体查询：

// When clicking in the container, move the bar and imageholder divs 
       $(obj).click(function(e){ 
        var clickX = e.pageX - $(this).offset().left; 
        $('#dragwrapper'+randID).stop().animate({'left':clickX-($('#dragwrapper'+randID).width()/2)+'px'},o.clickSpeed); 
        $('div:eq(2)', obj).stop().animate({'width':clickX+'px'},o.clickSpeed); 
        $('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50); 
       }); 
       $(obj).one('mousemove', function(){$('#dragwrapper'+randID).stop().animate({'opacity':1},500);}); 

// If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet 
       } 
      });

如果任何人有任何想法或方法他们如何做到这一点将会很棒！ PS-I知道媒体查询是一个CSS概念 - 只是不确定如何触发窗口调整大小查询到这个插件。

来源

2013-07-26 user2212564

你可以只添加一个条件，如“if（$（window）.width（）<= 580）'？ –

这只会进入插件脚本本身？为此事道歉！ – user2212564

请参阅以上以及完整代码 –

您能否添加如if($(window).width() <= 580)的条件？

的代码看起来就像这样：

// When clicking in the container, move the bar and imageholder divs 
        $(obj).click(function(e){ 
         if($(window).width() <= 580) { //added this line 
          var clickX = e.pageX - $(this).offset().left; 
          $('#dragwrapper'+randID).stop().animate({'left':clickX-($('#dragwrapper'+randID).width()/2)+'px'},o.clickSpeed); 
          $('div:eq(2)', obj).stop().animate({'width':clickX+'px'},o.clickSpeed); 
          $('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50); 
         } //added this line too 
        }); 
        $(obj).one('mousemove', function(){$('#dragwrapper'+randID).stop().animate({'opacity':1},500);}); 

    // If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet 
        } 
       });

来源

2013-07-26 13:49:15

感谢此 - 不确定我必须从插件中取出函数，或者如果我可以使用if函数。这帮了很多。 – user2212564

是否需要成为mediaQuery？如何在绑定事件之前通过js检查窗口的大小？

if(window.screen.width <= 580) { 
    //...bind the event 
}

来源

2013-07-26 13:29:23 michaelbinks

可以有你的媒体查询和jQuery的$（窗口）.WIDTH（），所以你之间的不一致可能想尝试检查changed CSS properties而不是与对应媒体查询你有。这应该确保应用CSS媒体查询时和jQuery处理点击之间的一致性。

来源

2013-10-03 06:51:32

jQuery媒体查询

回答

相关问题