一个简单的跑马灯 上下切换

    

分享一个简单的跑马灯 上下切换

网站或者移动端的跑马灯效果,后面的自己发挥吧!
QQ截图20190315124631.jpg


<!doctype html>
<!-- 
亿七QQ:3108308908
亿七博客:blog.aisyq.cn
-->
<html>
<head>
<meta charset="utf-8">
<title>跑马灯</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
li {
    list-style:none;
}
.wrap {
    width:300px;
    font-size:14px;
    color:red;
    margin:100px auto;
    border:1px  solid #ccc;
    text-align:center;
    line-height:30px;
    overflow:hidden;
    height:30px;
}
ul {
    overflow:hidden;
    padding:0;
    margin:0;
}
li {
    padding:0;
}
</style>
</head>
<body>
<div class="wrap">
    <ul>
        <li>这是第一条信息</li>
        <li>这是第二条信息</li>
        <li>这是第三条信息</li>
        <li>这是第四条信息</li>
    </ul>
</div>

<script>
$(function() {
    var $this = $(".wrap");
    var scrollTimer;
    $this.hover(function() {
        clearInterval(scrollTimer);
    }, function() {
        scrollTimer = setInterval(function() {
            scrollNews($this);
        }, 1000);//切换时间修改这里
    }).trigger("mouseleave");
});

function scrollNews(obj) {
    var $self = obj.find("ul:first");
    var innerHeight = $self.find("li:first").outerHeight(true);
    $self.animate({
        "marginTop": -innerHeight + "px"
    }, function() {
        $self.css({
            marginTop: 0
        }).find("li:first").appendTo($self);
    })
}
</script>

</body>
</html>

亿七Seven

添加新评论

青春就是用来追忆的,当你怀揣着它时,它一文不值,只有将它耗尽后,再回过头看,一切才有了意义,爱过我们的人和伤害过我们的人,都是我们青春存在的意义。

既然活着来到这个世界,就没有打算活着回去。所以,在这有限的时间里,我们应该珍惜生命,珍惜机会,更要珍惜那得之不易的时间。因那滴答做响的时间脚步,一旦走过,再不回头。

青春是一个充满魁力,充满诱惑的时代。好动是青春,好奇是青春,好玩是青春。玩世不恭更是青春,我们的一切切都是青春。

要先打败任何事情得先学会打败自己。

我会把每一次改变当做成长,哪怕是痛也值得。