0

我正在使用一个名为 beforeAfter 的插件（http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/）并且实现它的方式我只想在用户点击时进行企业点击正在使用一个屏幕说 580 像素。现在我有了它的开发代码，但不确定如何为此添加媒体查询。

这是完整代码的链接 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-我知道媒体查询是一个 CSS 概念——只是不确定如何将窗口调整大小查询触发到这个插件中。

4

3 回答 3

2

你可以添加一个条件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-26T13:49:15.137 回答
1

它需要是一个媒体查询吗？在绑定事件之前通过js检查窗口大小怎么样？

if(window.screen.width <= 580) {
    //...bind the event
}
于 2013-07-26T13:29:23.677 回答
0

您的媒体查询和 jQuery 的 $(window).width() 之间可能存在不一致，因此您可能想尝试检查更改的 CSS 属性，而不是与您拥有的媒体查询相对应。这应该确保应用 CSS 媒体查询和 jQuery 处理点击之间的一致性。

于 2013-10-03T06:51:32.400 回答