上下文本间隔自定义滚动时间的封装函数

在这里插入图片描述

HTML

     <div class="other">
                    <ul id="other">
                        <li><span></span><span>192.168.0.1</span><span>SQL注入</span><span>02-24 13:01:45</span></li>
                        <li><span></span><span>192.168.0.1</span><span>SQL注入</span><span>02-24 13:02:45</span></li>
                        <li><span></span><span>192.168.0.1</span><span>SQL注入</span><span>02-24 13:03:45</span></li>
                        <li><span></span><span>192.168.0.1</span><span>SQL注入</span><span>02-24 13:04:45</span></li>
                        <li><span></span><span>192.168.0.1</span><span>SQL注入</span><span>02-24 13:05:45</span></li>
                        <li><span></span><span>192.168.0.1</span><span>SQL注入</span><span>02-24 13:06:45</span></li>
                    </ul>
                </div>

调用函数

  getScroll(".basics", 10000);

封装函数

//文本间隔滚动效果;
function getScroll(className, timer) {
    var $this = $(className);
    var scrollTimer;
    $this.hover(function () {
        clearInterval(scrollTimer);
    }, function () {
        scrollTimer = setInterval(function () {
            scrollContent($this);
        }, timer);
    }).trigger("mouseout");
}

function scrollContent(obj) {
    var $self = obj.find("ul:first");
    var lineHeight = $self.find("li:first").height();
    $self.animate({
        "margin-top": -lineHeight + "px"
    }, 1000, function () {
        $self.css({
            "margin-top": "0px"
        }).find("li:first").appendTo($self);
    })
}

lockdatav Done!

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页