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

本分分享如何使用jQuery制作文字向上无缝滚动效果

主要js与解释

<script>
    var $this = $(".txt_con");
    var scrollTimer;
    $this.hover(
        function () {
            clearInterval(scrollTimer);
        },
        function () {
            scrollTimer = setInterval(function () {
                scrollTxts($this);
            }, 40);
        }
    ).trigger("mouseleave");
    function scrollTxts(obj) {
        var $self = obj.find("ul:first");
        var lineHeight = $self.find("li:first").outerHeight();
        $self.animate({ "marginTop": "-=1" }, 0, function () {
            if (Math.abs(parseInt($self.css('marginTop'))) >= lineHeight) {
                $self.css({ marginTop: 0 }).find("li:first").appendTo($self);
            }
        })
    } 
</script>