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

    

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

网站或者移动端的跑马灯效果,后面的自己发挥吧!
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>

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

  Previous post 分享10个 SVG 加载动画
Next post   已到最新一篇

添加新评论

生活其实很简单,过了今天就是明天。

低头哭过别忘了抬头继续走。

不要被任何人打乱自的脚步,因为没有谁会像你一样清楚和在乎自己梦想。

没有人可以打倒我,除非我自己先趴下!

你要记住你不是为别人而活,你是为自己而活。