jQuery跳跃性的无缝滚动

来源：互联网发布：淘宝试用官网编辑：程序博客网时间：2024/06/07 13:11

                                        **jQuery跳跃性的无缝滚动**

代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery跳跃性的无缝滚动</title>    <script type="text/javascript" src="jquery-1.9.1.js"></script>    <style type="text/css">    body{margin: 0;padding: 0;}    ul li{list-style: none;}    .content{width: 1000px;overflow: hidden;margin: 30px auto;position: relative;}    h1{text-align: center;}    #scroll_list{height: 248px;overflow: hidden;text-align: center;}    #scroll_list li{line-height: 30px; animation:1s ease; position: relative; height: 30px; font-size: 12px; }    </style></head><body>    <div class="content">        <h1>获奖名单</h1>        <hr>        <ul id="scroll_list">            <li>恭喜张三获得50元红包</li>            <li>恭喜李四获得50元红包</li>            <li>恭喜王五获得50元红包</li>            <li>恭喜马六获得50元红包</li>            <li>恭喜公孙获得50元红包</li>        </ul>           </div><script type="text/javascript">function scroll_news(){    $(function(){        $('#scroll_list li').eq(0).delay(1000).animate({height:'0px'},function(){            $(this).clone().appendTo($(this).parent()).show(0).css('height','30px');            $(this).remove();        });     });}setInterval('scroll_news()',1000);//每隔1000毫秒触发一次scroll_news函数</script>   </body></html>

效果图如下：
这里写图片描述
源码系在地址：http://pan.baidu.com/s/1eQfQPfs

0 0