Question

我有一个演示here来说明我的问题。这是一个滚动的图片库。单击图像时，它显示更大 - 灯箱样式。

悬停并点击图片是用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>

Answer 1

嗯，有很多方法可以解决这个问题。

在您的情况下，您可以检查点击事件的屏幕尺寸并进行适当的操作。

这样的事情：

    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.js http://wickynilliams.github.com/enquire.js/

希望有所帮助：）

媒体查询，停止jQuery窗口调整大小？

1 个答案: