媒體查詢，停止窗口調整大小的jQuery？

我有一個演示here來說明我的問題。這是一個滾動圖像庫。點擊圖片時會顯示更大的圖片樣式。媒體查詢，停止窗口調整大小的jQuery？

懸停並點擊圖片是用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>

來源

2012-09-05 ttmt

嘗試['.resize（）']（http://api.jquery.com/resize/） - 雖然CSS應該在JS之前執行，這可能會錯過它。 – Orbling

http://meta.stackexchange.com/a/5235/191224 –

那麼，有很多方法可以解決這個問題。

就您的情況而言，您可以在點擊事件中檢查屏幕大小並進行相應的操作。

事情是這樣的：

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/

希望它有幫助:)

來源

2012-09-06 01:01:13 Varinder

媒體查詢，停止窗口調整大小的jQuery？

回答

相關問題