一個非常好用的文字滾動的案例，鼠標懸浮可暫停[兩種方案任選]

更新時間：2016年12月01日 16:22:33 作者：蓓蕾心晴

本文主要介紹了非常好用的文字滾動的案例，鼠標懸浮可暫停的兩種實現(xiàn)方案，代碼簡潔，可收藏備用。需要的朋友來看下吧

網(wǎng)上找了很多，萬變不離其宗，寫法核心都是一樣的，在這里我給大家總結一下，可收藏備用。

html:

<div class="scroll">
 <ul class="list">
  <li><a href="#" target="_blank">公告一 或 中獎者 甲</a></li>
  <li><a href="#" target="_blank">公告二 或 中獎者 乙</a></li>
  <li><a href="#" target="_blank">公告三 或 中獎者 丙</a></li>
 </ul>
</div>

解析：適用于只有一行顯示的公告類，以及展示中獎名單/抽獎結果等大框類，改變list高度即可

方案一：

function autoScroll(obj) {
 $(obj).find(".list").animate({
  marginTop: "-25px"
 }, 1000, function () {
  $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
 })
}
var timer = setInterval('autoScroll(".scroll")', 1000);
$(function () {
 $(".scroll").hover(function () {
  clearInterval(timer);
 }, function () {
  timer = setInterval('autoScroll(".scroll")', 1000);
 })
})

方案二：

function autoScroll(obj) {
 //var _t;
 function scroll() {
  $(obj).find(".list").animate({
   marginTop: "-25px"
  }, 500, function () {
   $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
  })
 }
 var timer = setInterval(scroll, 2800);
 $(obj).hover(
  function () {
   clearInterval(_t);
  },
  function () {
   timer = setInterval(scroll, 2800);
  }
 )
}
$(function () {
 autoScroll(".scroll");
})

解析：兩種方案實現(xiàn)的功能是一樣的，都是通過改變margin-top的值，把第一個再添加到最后一個來實現(xiàn)的。第一種直接寫出運行步驟，定時器可以定義在加載函數(shù)的外面，也可寫在里面，但是以下的內容必須寫在加載函數(shù)的里面，否則不能正常執(zhí)行。

如果整體又定義為一個函數(shù)，則下面要在加載函數(shù)里調用一次函數(shù)，即可執(zhí)行。

在hover事件中的回調函數(shù)，必須寫timer=setInterval(),指定時器重新賦值給timer,直接寫setInterval不起作用，如果寫var timer=setInterval();則又重新定義了一個timer，同樣不起作用。

以上就是本文的全部內容，希望對大家有所幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

layui 地區(qū)三級聯(lián)動 form select 渲染的實例
今天小編就為大家分享一篇layui 地區(qū)三級聯(lián)動 form select 渲染的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
Raphael帶文本標簽可拖動的圖形實現(xiàn)代碼
Javascript和Raphael順便學習了一下,主要是為了實現(xiàn)一個可拖動的矩形同時矩形上還得顯示標簽，網(wǎng)上關于這方面的知識提的很是于是本人自不量力寫了一下，感興趣的你可不要錯過了哈，希望可以幫助到你
2013-02-02
JavaScript前端實現(xiàn)GIF圖片循環(huán)播放
使用 img 加載 GIF 圖片,內容只會播放一次,之后就會自動暫停,所以這篇文章為大家介紹了如何使用JavaScript實現(xiàn)GIF圖片循環(huán)播放吧
2025-03-03
如何利用Typescript封裝本地存儲
這篇文章主要給大家介紹了關于如何利用Typescript封裝本地存儲的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-01-01
微信小程序picker組件關于objectArray數(shù)據(jù)類型的綁定方法
這篇文章主要介紹了微信小程序picker組件關于objectArray數(shù)據(jù)類型的綁定方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
For循環(huán)中分號隔開的3部分的執(zhí)行順序探討
這篇文章主要探討了For循環(huán)中分號隔開的3部分的執(zhí)行順序,需要的朋友可以參考下
2014-05-05
DOM節(jié)點刪除函數(shù)removeChild()用法實例
這篇文章主要介紹了DOM節(jié)點刪除函數(shù)removeChild()用法,實例分析了removeChild()函數(shù)實現(xiàn)結點刪除的技巧,需要的朋友可以參考下
2015-01-01
ES6 新增的創(chuàng)建數(shù)組的方法(小結)
這篇文章主要介紹了ES6 新增的創(chuàng)建數(shù)組的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
js實現(xiàn)調用網(wǎng)絡攝像頭及常見錯誤處理
這篇文章主要介紹了js實現(xiàn)調用網(wǎng)絡攝像頭及常見錯誤處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-03-03
利用JS生成博文目錄及CSS定制博客
這篇文章主要介紹了利用JS生成博文目錄及CSS定制博客的相關資料,需要的朋友可以參考下
2016-02-02