水平滾動鼠標滾輪

Question

我有一個包含水平滾動條圖像的單行表，我想用鼠標滾輪水平滾動圖像。 這是我的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> 

Answer 1

您可以使用Mouse Wheel，一個jQuery插件，以實現水平滾動。 鼠標滾輪提供了兩個輔助方法稱爲mousewheel和unmousewheel其作用就像在jQuery的其他活動的輔助方法，你的代碼應該是這樣的：

<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> 

這裏是一個但這似乎DEMO Fiddle

Answer 2

而不是使用<div>包裹的圖像和描述的，使用<span>因爲它對齊內聯是默認。

工作代碼段：

<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>