JavaScript特效—滚动公告

今天给大家分享一篇滚动公告的特效。

效果图：
这里写图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动公告</title>
    <script src="jquery.js"></script>
    <style>
        body{
            margin:20px;
        }
        ul{
            width:200px;
            list-style-type: none;
            border:1px solid red;
        }
        li{
            height:30px;
            line-height: 30px
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1条公告</li>
        <li>我是第2条公告</li>
        <li>我是第3条公告</li>
        <li>我是第4条公告</li>
        <li>我是第5条公告</li>
        <li>我是第6条公告</li>
        <li>我是第7条公告</li>
        <li>我是第8条公告</li>
        <li>我是第9条公告</li>
        <li>我是第10条公告</li>
    </ul>
</body>
<script>
    //利用定时器每秒执行一次函数
    setInterval(function(){
        $('ul>:first').clone(true).appendTo('ul');//复制一个新的节点并添加到ul中
        $('ul>:first').remove();//将原来的节点删除
    },1000);
</script>
</html>

页面中有一个ul，首先写一个定时器，每秒执行一次函数，在函数中将ul中的第一个条目复制一份并添加到ul的底部，最后将原来的条目删除。