jQuery文字无缝向上滚动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jQuery制作文字无缝向上滚动效果。

主要js代码

<script>
    $(function () {
        var news = $("#news");
        news.children().filter("div").each(function () {
            var dt = $(this), container = $("<div>");
            dt.next().appendTo(container);
            dt.prependTo(container);
            container.appendTo(news)
        });
        news.css("overflow", "hidden");
        function animatop(currentItem) {
            //var distance = currentItem.height();
            var distance = currentItem[0].offsetHeight;
            duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;
            currentItem.animate({ marginTop: -distance }, duration, "linear", function () {
                currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
                animatop(currentItem.parent().children(":first"))
            })
        }
        animatop(news.children(":first"));
        news.mouseenter(function () {
            news.children().stop()
        });
        news.mouseleave(function () {
            animatop(news.children(":first"))
        })
    });
</script>