在鼠标滚轮上水平滚动 [英] Horizontal scrolling on Mouse Wheel

问题描述

我有一个单行表，其中包含带有水平滚动条的图像，并且我想使用鼠标滚轮水平滚动图像.这是我的html.

I have a single row table containing images with horizontal scroll bar, and I want to scroll images horizontally using mouse wheel. Here is my html.

<div class="container">
  <div class="image-gallery">
    <table>
      <tr>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_1.jpg" /><div class="description"><a class="image-slider-studets-names" href=" ">Alia Bhatt</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_2.jpg" /><div class="description"><a class="image-slider-studets-names" href="">sonia gandhi</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_3.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Barney Stinson</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_4.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Ranjit Choudary</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_5.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Gangadhar Shastri</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </div>
        </td>
      </tr>
    </table>
  </div>
</div>

推荐答案

您可以使用鼠标轮，一个实现水平滚动的jQuery插件.鼠标滚轮提供了两个名为 mousewheel 和 unmousewheel 的帮助器方法，它们与jQuery中的其他事件帮助器方法一样工作，您的代码应如下所示:

You can use Mouse Wheel, a jQuery Plugin to achieve horizontal scrolling. Mouse Wheel provides two helper methods called mousewheel and unmousewheel that act just like other event helper methods in jQuery and you code should look like this:

<div class="container">
 <div class="image-gallery">
     <table>
  <tr>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_1.jpg" /><div class="description"><a class="image-slider-studets-names" href=" ">Alia Bhatt</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_2.jpg" /><div class="description"><a class="image-slider-studets-names" href="">sonia gandhi</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_3.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Barney Stinson</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_4.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Ranjit Choudary</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_5.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Gangadhar Shastri</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </div>
    </td>
  </tr>
</table>
    </div>
  </div>


<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script>
$(document).ready(function(){
      $("body").mousewheel(function(event, delta) {

         //The "30" represents speed. preventDefault ensures the page won't scroll down.
         this.scrollLeft -= (delta * 30);
        event.preventDefault();

 });
});
</script>

这里是 演示小提琴

Here is a DEMO Fiddle

这篇关于在鼠标滚轮上水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！