• 您現(xiàn)在的位置： 創(chuàng)新互聯(lián) >> 網(wǎng)站建設(shè) >> 網(wǎng)絡(luò)建設(shè)常見問題 >> 基于jQuery的上下無縫滾動(dòng)代碼

基于jQuery的上下無縫滾動(dòng)代碼

• 作者：曾小姐 文章來源：成都網(wǎng)站建設(shè) 點(diǎn)擊數(shù)：2451 更新時(shí)間：2012-06-15

• 基于jQuery的上下無縫滾動(dòng)應(yīng)用,可應(yīng)用于多行或者單行。有需要的朋友可參考參考。如果你在網(wǎng)站制作上遇到什么難題，歡迎咨詢成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)，我們專業(yè)從事網(wǎng)站建設(shè)，網(wǎng)頁制作，域名注冊(cè)，虛擬主機(jī)，企業(yè)郵局，網(wǎng)站備案和服務(wù)器租用等項(xiàng)目，歡迎您的咨詢了解。您也可以登錄我們的論壇（http://bbs.cdxwcx.com）來和更多的網(wǎng)站愛好者進(jìn)行交流！
  核心代碼

  詳解請(qǐng)參考注釋.

  代碼如下

  $(function(){  var _wrap=$('ul.line');//定義滾動(dòng)區(qū)域  var _interval=2000;//定義滾動(dòng)間隙時(shí)間  var _moving;//需要清除的動(dòng)畫  _wrap.hover(function(){   clearInterval(_moving);//當(dāng)鼠標(biāo)在滾動(dòng)區(qū)域中時(shí),停止?jié)L動(dòng)  },function(){   _moving=setInterval(function(){    var _field=_wrap.find('li:first');//此變量不可放置于函數(shù)起始處,li:first取值是變化的    var _h=_field.height();//取得每次滾動(dòng)高度(多行滾動(dòng)情況下,此變量不可置于開始處,否則會(huì)有間隔時(shí)長延時(shí))    _field.animate({marginTop:-_h+'px'},600,function(){//通過取負(fù)margin值,隱藏第一行     _field.css('marginTop',0).appendTo(_wrap);//隱藏后,將該行的margin值置零,并插入到最后,實(shí)現(xiàn)無縫滾動(dòng)    })   },_interval)//滾動(dòng)間隔時(shí)間取決于_interval  }).trigger('mouseleave');//函數(shù)載入時(shí),模擬執(zhí)行mouseleave,即自動(dòng)滾動(dòng) });

  html代碼

  代碼如下

  <!--DEMO start--> <div id="demo"> <h2>單行應(yīng)用</h2> <ul class="line">  <li><a title="簡易的點(diǎn)擊展開/關(guān)閉效果(原生JS版和JQ版)" href="">簡易的點(diǎn)擊展開/關(guān)閉效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>  <li><a title="getElementsByTagName的簡寫方式" href="">getElementsByTagName的簡寫方式</a> 2010年06月24日 (4)</li>   </ul> <!--//jQ版本//--> <h2>多行應(yīng)用</h2> <ul class="mulitline">  <li><a title="一個(gè)簡單的鼠標(biāo)劃過切換效果" href="">一個(gè)簡單的鼠標(biāo)劃過切換效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過高亮顯示類" >奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過高亮顯示類</a> 2010年05月05日 (5)</li>   </ul> <!--//多行應(yīng)用//--> </div> <!--DEMO end-->

  
  
• 上一篇文章：導(dǎo)出excel表格出現(xiàn)科學(xué)計(jì)數(shù)法處理方法
  下一篇文章：給fckeditor文本編輯器增加圖片刪除功能