jQuery的觸發水平滾動，停止年底/ beggining，得到寬度窗口

我想這基本上是一個jQuery的滑塊我之後，卻沒有一個人的我都試過（caroufredsel，elastislide，smoothdivscroll的）正是我想要的，而且大多數提供了太多額外的功能，我不需要。我真正想要做的就是觸發瀏覽器的水平滾動，通過jquery，所以我可以隱藏滾動條並使用按鈕來觸發滾動。

要求：
-a水平滾動div寬度爲100％，所以無論瀏覽器的窗口大小如何，圖像都會從左到右邊緣填充。（完成，見下文鏈接）

圖像的-The寬度變化

- 觸發器向左或通過在一個時間點擊外部控制像<div id="scroll-left">scroll left</div>由一個頁面向右滾動。

- 使用寬鬆

-Stop在開頭或DIV（就像一個瀏覽器的滾動行爲）的結束

jQuery的觸發水平滾動，停止年底/ beggining，得到寬度窗口

滾動相信什麼人，何時是jQuery的得到的當前寬度div或瀏覽器窗口能夠知道滾動的距離，然後需要知道何時停止。

也許它比這更簡單。

我有一個基本的水平滾動格前jquery樣機：HERE

任何幫助指出我在正確的方向將不勝感激。

來源

2012-03-30 rod

這是我想出了一個「快速正髒」的例子：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Example</title> 
     <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
     <script type="text/javascript"> 
      var curPage = 0; 
      $(document).ready(function(){ 
       var div = $("#scrolldiv"); 
       div.scrollLeft(0); 

       $("#scroll-right").click(function(){ 
        var curPos = div.scrollLeft(); 
        var curImage = div.find("img:eq("+curPage+")"); 
        if (curImage) { 
         width = curImage.width(); 
         div.animate({scrollLeft: curPos+width}, 'slow'); 
        } 
        curPage = curPage + 1; 
       }); 

       $("#scroll-left").click(function(){ 
        var curPos = div.scrollLeft(); 
        curPage = curPage - 1; 
        var curImage = div.find("img:eq("+curPage+")"); 
        if (curImage) { 
         width = curImage.width(); 
         div.animate({scrollLeft: curPos-width}, 'slow'); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="scrolldiv" style="width:100%;height:490px;float:left;display:inline;white-space: nowrap;overflow:hidden"> 
      <img src="ukvogue2.jpg" width="693" heigh="458" /> 
      <img src="ukvogue2.jpg" width="193" heigh="458" /> 
      <img src="ukvogue2.jpg" width="693" heigh="458" /> 
      <img src="ukvogue2.jpg" width="493" heigh="458" /> 
      <img src="ukvogue2.jpg" width="593" heigh="458" /> 
      <img src="ukvogue2.jpg" width="393" heigh="458" /> 
      <img src="ukvogue2.jpg" width="293" heigh="458" /> 
     </div> 
     <a href="#" id="scroll-left">Left</a>&nbsp;|&nbsp; 
     <a href="#" id="scroll-right">Right</a> 
    </body> 
</html>

希望這將指向你到正確的方向。

來源

2012-03-30 02:18:03

謝謝。我添加了只能在第一次滾動時使用的緩動。在此之後的任何額外的滾動方向（取決於寡婦大小）不允許[寬鬆]完成其整個週期。我相信這是因爲滾動長度是根據負載預先確定的，並沒有考慮剩餘滾動的情況，在這種情況下，滾動長度小於第一個。 – rod 2012-03-30 19:40:43

jQuery的觸發水平滾動，停止年底/ beggining，得到寬度窗口

回答

相關問題