DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jQuery的上下無縫滾動應用(單行或多行)
基於jQuery的上下無縫滾動應用(單行或多行)
編輯:JQuery特效代碼     
核心jQuery代碼:
代碼如下:
$(function(){
var _wrap=$('ul.line');//定義滾動區域
var _interval=2000;//定義滾動間隙時間
var _moving;//需要清除的動畫
_wrap.hover(function(){
clearInterval(_moving);//當鼠標在滾動區域中時,停止滾動
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此變量不可放置於函數起始處,li:first取值是變化的
var _=_field.height();//取得每次滾動高度(多行滾動情況下,此變量不可置於開始處,否則會有間隔時長延時)
_field.animate({marginTop:-_h+'px'},600,function(){//通過取負margin值,隱藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隱藏後,將該行的margin值置零,並插入到最後,實現無縫滾動
})
},_interval)//滾動間隔時間取決於_interval
}).trigger('mouseleave');//函數載入時,模擬執行mouseleave,即自動滾動
});

演示代碼:

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved