Div滚动与jQuery动画

Div scroll with jQuery animate

本文关键字：动画 jQuery 滚动 Div      更新时间：2023-09-26

我试图为youtube播放器创建我自己的"字幕"系统。目前我坚持使用js滚动，只是不能正常工作。

代码:

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

你可以在网上看到它在这里(对不起，俄语在页面上)。在谷歌浏览器，它有时跳上跳下，并停止在错误的位置。当滚动条已经滚动到某个位置，下一个滚动条也部分可见时，就会发生这种情况。

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

我自己解决了这个问题。关键是动画卷轴使用的是与页面顶部的绝对距离，所以到每个元素的距离是: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>

请不要忘记版权，享受!

相关文章：