基于jQuery的上下無縫滾動應用(單行或多行)
更新時間：2010年08月10日 21:11:12 作者：
基于jQuery的上下無縫滾動應用,可應用于多行或者單行.詳解請參考注釋.
核心jQuery代碼:
$(function(){
var _wrap=$('ul.line');//定義滾動區(qū)域
var _interval=2000;//定義滾動間隙時間
var _moving;//需要清除的動畫
_wrap.hover(function(){
clearInterval(_moving);//當鼠標在滾動區(qū)域中時,停止?jié)L動
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此變量不可放置于函數(shù)起始處,li:first取值是變化的
var _=_field.height();//取得每次滾動高度(多行滾動情況下,此變量不可置于開始處,否則會有間隔時長延時)
_field.animate({marginTop:-_h+'px'},600,function(){//通過取負margin值,隱藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隱藏后,將該行的margin值置零,并插入到最后,實現(xiàn)無縫滾動
})
},_interval)//滾動間隔時間取決于_interval
}).trigger('mouseleave');//函數(shù)載入時,模擬執(zhí)行mouseleave,即自動滾動
});
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復制代碼 代碼如下:
$(function(){
var _wrap=$('ul.line');//定義滾動區(qū)域
var _interval=2000;//定義滾動間隙時間
var _moving;//需要清除的動畫
_wrap.hover(function(){
clearInterval(_moving);//當鼠標在滾動區(qū)域中時,停止?jié)L動
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此變量不可放置于函數(shù)起始處,li:first取值是變化的
var _=_field.height();//取得每次滾動高度(多行滾動情況下,此變量不可置于開始處,否則會有間隔時長延時)
_field.animate({marginTop:-_h+'px'},600,function(){//通過取負margin值,隱藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隱藏后,將該行的margin值置零,并插入到最后,實現(xiàn)無縫滾動
})
},_interval)//滾動間隔時間取決于_interval
}).trigger('mouseleave');//函數(shù)載入時,模擬執(zhí)行mouseleave,即自動滾動
});
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關文章
這篇文章主要介紹了jquery使整個div區(qū)域可以點擊的方法,涉及jQuery操作頁面元素與鼠標事件的技巧,需要的朋友可以參考下2015-06-06
最近用jQuery來寫下拉框的選項值的左右移動，放到jsp里面就不能用了，經(jīng)過測試終于找到了解決方法在此與大家分享下2013-08-08
計劃總是趕不上變化，這篇插件開發(fā)的文章本應在上周完成，由于手頭的項目實在緊張，只好讓路吧，嘿嘿。今天將跟大家一起完成這個插件的開發(fā)流程。2011-08-08
在鼠標放到圖片上， 圖片會有個上下抖動的特效。很喜歡這種感覺。在于是摸索了一下，下面是一些步驟。2010-09-09
這篇文章主要介紹了jQuery實現(xiàn)的跨容器無縫拖動效果代碼,可實現(xiàn)容器的任意添加與拖動功能,涉及jQuery UI插件的使用技巧,需要的朋友可以參考下2016-06-06
我總是樂于嘗試新工具或利用節(jié)省開發(fā)時間的資源。由于市面上存在有許多Web開發(fā)工具，你可能很難縮小搜索范圍。2009-02-02
使用jQuery簡化Ajax開發(fā) Ajax開發(fā)入門
jQuery是一個可以簡化 JavaScript™以及AJAX（Asynchronous JavaScript + XML，異步Javascript和XML）編程的Javascript庫。不同于其他的Javascript庫，jQuery有他自己的哲學，使你可以 很簡單的編寫代碼。2009-10-10
jquery+ajax每秒向后臺發(fā)送請求數(shù)據(jù)然后返回頁面的代碼
jquery+ajax每秒向后臺發(fā)送請求數(shù)據(jù)然后返回頁面（包括jquery頁面加載完畢才執(zhí)行方法）2011-01-01
這篇文章主要介紹了jQuery表單驗證的方法,結合簡單實例形式分析了jQuery針對表單必填項進行驗證的方法,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了bootstrap table 服務器端分頁例子分享,需要的朋友可以參考下2015-02-02