用鼠標移動水平滾動頁面

我有一個簡單的圖像列表，它在頁面的右側水平浮動。用鼠標移動水平滾動頁面

http://www.ttmt.org.uk/forum/gallery/

我可以查看通過鼠標在圖像左右滾動。

如何通過左右移動鼠標滾動頁面而不滾動。

所以畫廊的位置將由鼠標在頁面上的位置決定。

<!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"> 
     ul#gallery { 
      margin:100px 0 0 0; 

      float:left; 
      height:500px; 
      margin-right:-20000px; 
     } 
     ul#gallery li{ 
      display:inline; 
     } 
     ul#gallery li img{ 
      float:left; 
      height:100%; 
     } 
     #header{ 
      position:fixed; 
      margin:20px 0 0 20px; 
     } 
     #header img, 
     #header ul#info{ 
      float:left; 
     } 
     #header ul#info{ 
      margin:5px 0 0 50px; 
     } 
     #header ul#info li{ 
      color:#aaa; 
      font:.95em/1.5em Helvetica, sans-serif; 
     } 
     #header ul#info li a{ 
      color:#aaa; 
      text-decoration:none; 
     } 
     #header ul#info li a:hover{ 
      color:#333; 
     } 
     #header select{ 
      margin:20px 0 0 50px; 
     } 
     #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:90%; 
       max-width:100%; 
      } 
     </style> 

     </head> 

    <body> 



     <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($) { 

     $('.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-07-06 ttmt

鉤入'mousemove'事件並使用鼠標的位置來滾動圖像容器。 – TheZ 2012-07-06 22:24:23

一個簡單的純javascript DOM操作溶液這裏：http://jsfiddle.net/zTGS9/4/

var _lis = document.getElementsByTagName('li'); 
    for (var i = 0; i < _lis.length; ++i) { 
     _lis[i].addEventListener('mousedown', function(e) { 
      if (e.clientX < (this.offsetWidth >> 1)) { 
       this.appendChild(this.removeChild(this.firstElementChild)); 
      } else { 
       this.insertBefore(this.lastElementChild, this.firstElementChild); 
       } 
     }); 
    }

來源

2014-03-20 11:22:04

您可以看到該解決方案here。

來源

2012-07-06 22:29:47 Cleverbot

如果這是您正在尋找的功能，請點擊此答案分數下方的複選標記，以將其標記爲「正確答案」給其他用戶:) – Cleverbot 2012-07-06 22:43:49

用鼠標移動水平滾動頁面

回答

相關問題