Div滾動與jQuery動畫

我試圖爲youtube播放器創建自己的「字幕」系統。目前我堅持js滾動，只是無法正常工作。Div滾動與jQuery動畫

代碼：

<script type="text/javascript" language="javascript"> 
    var player; 
    var scrollToTimePosition; 
    // document.onReady 
    $(document).ready(function() { 
     var id = "QH2-TGUlwu4"; 
     var params = { allowScriptAccess: "always" }; 
     swfobject.embedSWF("http://www.youtube.com/v/" + id + "?enablejsapi=1", "video-container", "500", "375", "8", null, null, params, null); 
    }); 

    // YouTube API Required function 
    function onYouTubePlayerReady() { 
     player = document.getElementById("video-container"); 
     //player.playVideo(); 

     setInterval(function() { 
      if(player.getPlayerState() == 1) { 
       var time = Math.round(player.getCurrentTime()); 
       if(time > 1 && scrollToTimePosition != time) { 
        var anchor = $("#text-container > a[href=#"+time+"]"); 
        if(anchor.length) { 
         scrollToTimePosition = time; 
         $('#text-container').animate({ 
          scrollTop: anchor.offset().top - $("#text-container").offset().top 
         }, 1000); 
        } 
       } 
      } 
     }, 500); 
    } 
</script>

你可以看到它在線here（抱歉頁俄語）。在Google Chrome瀏覽器中，它有時會上下跳動，並停在錯誤的位置。它發生在滾動條已經滾動到某個位置並且下一個也是部分可見的時候。

UDP：我已經添加控制檯日誌，便於調試，日誌是這樣的：

Move to #33 with shift 204px 
Move to #43 with shift 219px 
Move to #46 with shift 261px 
Move to #53 with shift 438px 
Move to #60 with shift 480px 
Move to #63 with shift 657px 
Move to #65 with shift 915px

來源

2011-11-17 Andrew Dryga

類型與您的問題無關，但當用戶在視頻中跳過時會發生什麼情況？ –

由於間隔每500毫秒檢查一次當前視頻時間位置，所以該腳本在向前跳過時工作正常，我還想指出至今爲止的好腳本。以前沒有真正見過類似的東西。 –

@MeisamMulla，它運作良好。當您跳過視頻時，它會繼續播放到下一個滾動點，然後將字幕滾動到正確的位置。我想通過自動滾動到最近的位置來立即改善這一點。 –

我已經通過我自己解決了這個問題。關鍵是動畫滾動使用從頁面頂部的絕對距離，所以到每個元素的距離是： D =距離表格頂部到可滾動容器（在我的情況下div）+從容器頂部到元素的距離; 而這個值是靜態的，所以女巫位置滾動條不重要，距離應該預先計算和固定。

新代碼：

<script type="text/javascript" language="javascript"> 
    // document.onReady 
    $(document).ready(function() { 
     var id = "QH2-TGUlwu4"; 
     var params = { allowScriptAccess: "always" }; 
     swfobject.embedSWF("http://www.youtube.com/v/" + id + "?enablejsapi=1", "video-container", "500", "375", "8", null, null, params, null); 
    }); 

    /** 
    * Creates auto-scrollable div based on YouTube video player current time. 
    * 
    * Div is scrolled to link anchor, that keeps a timestamp in a href value, which will be used as scroll target. 
    * Example of anchors: 
    * <a href="#1">0:01</a> 
    * <a href="#31">0:31</a> 
    * <a href="#71">1:11</a> 
    * 
    * @author Andrew Dryga <http://go.dryga.com/email> 
    * @param playerContainerSelector Selector for video container (element that holds player) 
    * @param scrollableContainerSelector Selector for scrollable container (for ex. div with overflow-y: scroll) 
    */ 
    var YouTubeAutoScrolledSubtitles = function(playerContainerSelector, scrollableContainerSelector) { 
     // Link to player container 
     var player = $(playerContainerSelector).get(0); 
     // Selector for continer that will be scrolled 
     var containerSelector = scrollableContainerSelector; 
     // Link to continer that will be scrolled 
     var container = $(containerSelector); 
     // Sive current point to dont call scroll several times 
     var scrollToTimePosition; 

     // This function scrolls container to current position 
     var scroller = function() { 
      var time = Math.round(player.getCurrentTime()); 

      if(time > 0 && scrollToTimePosition != time) { 
       var anchor = $(containerSelector + " > a[href=#"+time+"]"); // FIXME 
       if(anchor.length) { 
        scrollToTimePosition = time; 
        container.animate({ 
         scrollTop: anchor.data('absoluteDistanceFromTop') - container.offset().top + 3 
        }, 1000); 
       } 
      } 
     } 

     // Preparing data for scroll, savind absolute anchors position from top 
     var prepareAnchors = function() { 
      $(containerSelector + " > a").each(function() { 
       $(this).data('absoluteDistanceFromTop', $(this).offset().top); 
      }); 
     }; 

     // Start scrolling 
     var scroll = function() { 
      var scrollerInterval = setInterval(function() { 
       if(player.getPlayerState() == 1) { 
        scroller(); 
       } 
      }, 500); 
     } 

     // Starting scroller 
     prepareAnchors(); 
     // Start scroll 
     scroll(); 

    }; 

    // YouTube API Required function 
    function onYouTubePlayerReady() { 
     YouTubeAutoScrolledSubtitles("#video-container", "#text-container"); 
    } 
</script>

內容部分可以是水木清華這樣的：

<div id="video-container"></div> 
<div id="text-container"> 
    <a href="#1">0:01</a> 
    <div>Block 1</div> 

    <a href="#5">0:05</a> 
    <div>Block 2</div> 
</div>

請不要忘記版權，享受！

來源

2011-11-17 18:18:09

Div滾動與jQuery動畫

回答

相關問題