当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Horizontal scrolling on Mouse Wheel

问题描述:

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>

网友答案:

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

网友答案:

Instead of using <div> to wrap the image and description, use <span> because it aligns inline be default.

Working Code Snippet:

<div class="container">
  <div class="image-gallery">
    <table>
      <tr>
        <td class="images"><span class="img"><img src="../Images/small_Image_1.jpg" /><div class="description"><a class="image-slider-studets-names" href=" ">Alia Bhatt</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_2.jpg" /><div class="description"><a class="image-slider-studets-names" href="">sonia gandhi</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_3.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Barney Stinson</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_4.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Ranjit Choudary</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_5.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Gangadhar Shastri</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
        <!-- duplicating it/adding more to get the horizontal scrollbar -->
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>            
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>            
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>            
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
      </tr>
    </table>
  </div>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: