欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一個(gè)非常好用的文字滾動(dòng)的案例，鼠標(biāo)懸浮可暫停[兩種方案任選]

 更新時(shí)間：2016年12月01日 16:22:33   作者：蓓蕾心晴  
本文主要介紹了非常好用的文字滾動(dòng)的案例，鼠標(biāo)懸浮可暫停的兩種實(shí)現(xiàn)方案，代碼簡(jiǎn)潔，可收藏備用。需要的朋友來看下吧

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

html:

<div class="scroll">
 <ul class="list">
  <li><a href="#" target="_blank">公告一 或 中獎(jiǎng)?wù)?甲</a></li>
  <li><a href="#" target="_blank">公告二 或 中獎(jiǎng)?wù)?乙</a></li>
  <li><a href="#" target="_blank">公告三 或 中獎(jiǎng)?wù)?丙</a></li>
 </ul>
</div>

解析：適用于只有一行顯示的公告類，以及展示中獎(jiǎng)名單/抽獎(jiǎng)結(jié)果等大框類，改變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");
})

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，同時(shí)也希望多多支持腳本之家！

相關(guān)文章

最新評(píng)論