Question

我这里有一个简单的图像列表，它在页面右侧水平浮动。

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>

Answer 1

这里有一个简单的纯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);
               }
        });
    }

Answer 2

您可以看到here的解决方案。

用鼠标移动水平滚动页面

2 个答案: