JavaScript特效—滚动公告

来源：互联网发布：c语言数组定义不加数字编辑：程序博客网时间：2024/05/15 00:34

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

效果图：
这里写图片描述

代码：

<!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的底部，最后将原来的条目删除。

0 0