这里有一个演示来说明我的问题。这是一个滚动图片库。当一个图像被点击时，它会显示更大的灯箱样式。
图像上的悬停和点击是用jQuery完成的。我希望这个页面能够对使用手机屏幕做出响应。如果将浏览器的大小调整为大约400px，则布局将更改为一列并垂直滚动。
当布局发生变化时，我希望jQuery停止——我不希望悬停，也不希望单击时出现更大的图像。当媒体查询启动时，我如何停止或更改jQuery？
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
#header{
position:fixed;
margin:20px 0 0 20px;
}
#header #logo{
width:100px;
height:80px;
background:red;
}
ul#gallery {
margin:120px 0 0 0;
float:left;
height:500px;
margin-right:-20000px;
}
ul#gallery li{
display:inline;
}
ul#gallery li img{
float:left;
height:100%;
}
#lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(overlay.png) repeat;
text-align:center;
}
#lightbox p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}
#lightbox img {
box-shadow:0 0 15px #111;
-webkit-box-shadow:0 0 15px #111;
-moz-box-shadow:0 0 15px #111;
max-width:940px;
}
#content img{
height:85%;
max-width:100%;
}
/*--------------------------------------
Media Query
---------------------------------------*/
@media screen and (max-width: 400px){
#header #logo{
height:50px;
}
ul#gallery {
margin:20px 0 0 0;
width:400px;
}
ul#gallery li{
display:block;
}
ul#gallery li img{
opacity:0.5;
height:auto;
width:400px;
}
#header{
position:static;
margin:10px 0 0 20px;
}
}
</style>
</head>
<body>
<div id="header">
<div id="logo"></div><!-- #logo -->
</div><!-- #header -->
<ul id="gallery">
<li><a href="images/01.jpg" class="lightbox_trigger"><img src="images/01.jpg" /></a></li>
<li><a href="images/02.jpg" class="lightbox_trigger"><img src="images/02.jpg" /></a></li>
<li><a href="images/03.jpg" class="lightbox_trigger"><img src="images/03.jpg" /></a></li>
<li><a href="images/04.jpg" class="lightbox_trigger"><img src="images/04.jpg" /></a></li>
<li><a href="images/05.jpg" class="lightbox_trigger"><img src="images/05.jpg" /></a></li>
<li><a href="images/06.jpg" class="lightbox_trigger"><img src="images/06.jpg" /></a></li>
<li><a href="images/07.jpg" class="lightbox_trigger"><img src="images/07.jpg" /></a></li>
<li><a href="images/08.jpg" class="lightbox_trigger"><img src="images/08.jpg" /></a></li>
<li><a href="images/09.jpg" class="lightbox_trigger"><img src="images/09.jpg" /></a></li>
<li><a href="images/10.jpg" class="lightbox_trigger"><img src="images/10.jpg" /></a></li>
<li><a href="images/11.jpg" class="lightbox_trigger"><img src="images/11.jpg" /></a></li>
<li><a href="images/12.jpg" class="lightbox_trigger"><img src="images/12.jpg" /></a></li>
<li><a href="images/13.jpg" class="lightbox_trigger"><img src="images/13.jpg" /></a></li>
<li><a href="images/14.jpg" class="lightbox_trigger"><img src="images/14.jpg" /></a></li>
<li><a href="images/15.jpg" class="lightbox_trigger"><img src="images/15.jpg" /></a></li>
</ul>
<script>
jQuery(document).ready(function($) {
$('#gallery img').hover(
function () {
$(this).css('opacity',1)
},
function () {
$(this).css('opacity',.4);
}
);
$('.lightbox_trigger').click(function(e) {
e.preventDefault();
var image_href = $(this).attr("href");
if ($('#lightbox').length > 0) { // #lightbox exists
$('#content').html('<img src="' + image_href + '" />');
//$('#lightbox').show();
$('#lightbox').fadeIn('2000');
}
else {
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' +
'<img src="' + image_href +'" />' +
'</div>' +
'</div>';
$('body').append(lightbox);
}
});
$('#lightbox').live('click', function() {
$('#lightbox').hide();
});
});
</script>
</body>
</html>
有很多方法可以解决这个问题。
在您的情况下，您可以检查点击事件的屏幕大小并进行适当的操作。
类似这样的东西：
var winWidth = $(window).width(); //cache window width
$(window).resize(function() {
winWidth = $(this).width(); //updating winWidth with current window width
});
现在，当点击灯箱处理程序时，进行winWidth大小检查：
$('.lightbox_trigger').click(function(e) {
e.preventDefault();
var image_href = $(this).attr("href");
if (winWidth > 400) { //Checking if screen size is greater than 400
if ($('#lightbox').length > 0) { // #lightbox exists
$('#content').html('<img src="' + image_href + '" />');
//$('#lightbox').show();
$('#lightbox').fadeIn('2000');
}
else {
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' +
'<img src="' + image_href +'" />' +
'</div>' +
'</div>';
$('body').append(lightbox);
}
}
});
如果你经常安静地进行这种屏幕检查，我建议你看看enquire.jshttp://wickynilliams.github.com/enquire.js/
希望有帮助：）