當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript特效—滚动公告
生活随笔
收集整理的這篇文章主要介紹了
JavaScript特效—滚动公告
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
今天給大家分享一篇滾動公告的特效。
效果圖：
代碼：
<!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>//利用定時器每秒執(zhí)行一次函數(shù)setInterval(function(){$('ul>:first').clone(true).appendTo('ul');//復制一個新的節(jié)點并添加到ul中$('ul>:first').remove();//將原來的節(jié)點刪除},1000); </script> </html>頁面中有一個ul，首先寫一個定時器，每秒執(zhí)行一次函數(shù)，在函數(shù)中將ul中的第一個條目復制一份并添加到ul的底部，最后將原來的條目刪除。
總結
以上是生活随笔為你收集整理的JavaScript特效—滚动公告的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： weblogic部署静态资源文件html
- 下一篇： JavaScript网页简单特效