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

来源：互联网发布：如何开网店淘宝店编辑：程序博客网时间：2024/06/02 11:54
<!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>
0 0