公交站台广告牌滚动效果图

最新推荐文章于 2021-04-29 17:58:15 发布

David_黎

最新推荐文章于 2021-04-29 17:58:15 发布

阅读量959

点赞数

分类专栏： HTML 文章标签：公交站台广告牌上下滚动

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>公交站台广告牌滚动效果图</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    ul li{
        list-style: none;
    }
    .box{
        margin: 10px auto;
        width: 200px;
        height: 100px;
        border: 1px solid #000000;
        overflow: hidden;
    }
    .box ul li{
        height: 100px;
        border: 1px solid #000000;
    }
</style>
<body>
<div class="box">
     <ul id="slider">
         <li style="background: red">1</li>
         <li style="background: gold">2</li>
         <li style="background: green">3</li>
         <li style="background: beige">4</li>
         <li style="background: #0000ff">5</li>
     </ul>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        var slider = $("#slider");
        var next_height = slider.children().last().outerHeight();
        setInterval(function(){
            slider.animate({'margin-top':next_height+'px'},500,function(){
                var next_li = slider.children().last();
                slider.prepend(next_li);
                slider.css('margin-top',0);
                var find_li = slider.children().find();
                find_li.animate({'opacity':'show'},500,function(){
                    next_height = slider.children().last().outerHeight();
                });
            })
        },3000);
    });
</script>
</html>