JavaScript實現(xiàn)的滾動公告特效【基于jQuery】

更新時間：2019年07月10日 10:20:49 作者：webbc

這篇文章主要介紹了JavaScript實現(xiàn)的滾動公告特效,結合完整實例形式詳細分析了基于jQuery實現(xiàn)的頁面元素間歇修改,最終達到滾動公告效果的相關操作技巧,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)的滾動公告。分享給大家供大家參考，具體如下：

今天給大家分享一篇滾動公告的特效。

效果圖：

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>滾動公告</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.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的底部，最后將原來的條目刪除。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jQuery事件多次綁定與解綁問題實例分析
這篇文章主要介紹了jQuery事件多次綁定與解綁問題,結合實例形式分析了jQuery事件多次綁定情況下的運行情況,以及解綁相關操作技巧,需要的朋友可以參考下
2019-02-02
Jquery $when done then的用法詳解
這篇文章主要介紹了Jquery $when done then的用法詳解的相關資料,本文還通過一個例子給大家介紹jquery when then(done) 用法，需要的朋友可以參考下
2016-05-05
基于jquery的設置頁面文本框只能輸入數(shù)字的實現(xiàn)代碼
之前寫過的方法有缺陷，可以輸入空格?，F(xiàn)在將空格也屏蔽了。就是在之前的代碼里加入了過濾空格的功能。
2011-04-04
jQuery實現(xiàn)移動和漸變特效的點擊事件
這里給大家分享的是一則使用jQuery實現(xiàn)移動和漸變特效的點擊事件效果，非常簡單實用，這里推薦給大家。
2015-02-02
jQuery移動和復制dom節(jié)點實用DOM操作案例
復制節(jié)點也是常用的DOM操作之一，例如很多購物網(wǎng)站的效果,本文將介紹jQuery移動和復制dom節(jié)點等實用DOM操作，有需的朋友可以參考下
2012-12-12
jQuery模板技術和數(shù)據(jù)綁定實現(xiàn)代碼
如果你用過ASP.NET的數(shù)據(jù)綁定控件，也用過ASP或者JSP里那種通過輸出HTML元素在頁面上顯示數(shù)據(jù)的方法，你就知道ASP.NET數(shù)據(jù)綁定控件有多么方便。如果能夠將同樣的功能在瀏覽器端用HTML和JavaScript實現(xiàn)，那該是多少美妙的事情。
2010-05-05
jQuery頁面彈出框實現(xiàn)文件上傳
這篇文章主要為大家詳細介紹了jQuery頁面彈出框實現(xiàn)文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery實現(xiàn)的簡單拖動層示例
這篇文章主要介紹了jQuery實現(xiàn)的簡單拖動層,可實現(xiàn)響應鼠標拖動div層及動態(tài)顯示坐標值的功能,涉及jQuery鼠標響應及頁面元素屬性相關操作技巧,需要的朋友可以參考下
2017-02-02
jQuery實現(xiàn)切換隱藏與顯示同時切換圖標功能
這篇文章主要介紹了jQuery實現(xiàn)切換隱藏與顯示同時切換圖標功能,需要的朋友可以參考下
2017-10-10
深入分析JQuery和JavaScript的異同
本文主要是筆者對于jQuery和javascript的的異同點的分析記錄，非常的淺顯易懂，
2014-10-10