基于jQuery的上下無縫滾動(dòng)應(yīng)用(單行或多行)
更新時(shí)間：2010年08月10日 21:11:12 作者：
基于jQuery的上下無縫滾動(dòng)應(yīng)用,可應(yīng)用于多行或者單行.詳解請(qǐng)參考注釋.
核心jQuery代碼:
$(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 _=_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)
});
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復(fù)制代碼 代碼如下:
$(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 _=_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)
});
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- Jquery原生態(tài)實(shí)現(xiàn)表格header頭隨滾動(dòng)條滾動(dòng)而滾動(dòng)
- jquery實(shí)現(xiàn)簡單的無縫滾動(dòng)
- jquery無縫向上滾動(dòng)實(shí)現(xiàn)代碼
- 基于jQuery的圖片左右無縫滾動(dòng)插件
- jQuery插件scroll實(shí)現(xiàn)無縫滾動(dòng)效果
- jcarousellite.js 基于Jquery的圖片無縫滾動(dòng)插件
- jquery 文本上下無縫滾動(dòng),鼠標(biāo)放上去就停止 小例子
- jQuery動(dòng)畫效果實(shí)現(xiàn)圖片無縫連續(xù)滾動(dòng)
- jquery xMarquee實(shí)現(xiàn)文字水平無縫滾動(dòng)效果
- jquery實(shí)現(xiàn)表格無縫滾動(dòng)
相關(guān)文章
jquery使整個(gè)div區(qū)域可以點(diǎn)擊的方法
這篇文章主要介紹了jquery使整個(gè)div區(qū)域可以點(diǎn)擊的方法,涉及jQuery操作頁面元素與鼠標(biāo)事件的技巧,需要的朋友可以參考下2015-06-06
最近用jQuery來寫下拉框的選項(xiàng)值的左右移動(dòng)，放到j(luò)sp里面就不能用了，經(jīng)過測試終于找到了解決方法在此與大家分享下2013-08-08
計(jì)劃總是趕不上變化，這篇插件開發(fā)的文章本應(yīng)在上周完成，由于手頭的項(xiàng)目實(shí)在緊張，只好讓路吧，嘿嘿。今天將跟大家一起完成這個(gè)插件的開發(fā)流程。2011-08-08
基于jquery的仿百度的鼠標(biāo)移入圖片抖動(dòng)效果
在鼠標(biāo)放到圖片上， 圖片會(huì)有個(gè)上下抖動(dòng)的特效。很喜歡這種感覺。在于是摸索了一下，下面是一些步驟。2010-09-09
jQuery實(shí)現(xiàn)的跨容器無縫拖動(dòng)效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的跨容器無縫拖動(dòng)效果代碼,可實(shí)現(xiàn)容器的任意添加與拖動(dòng)功能,涉及jQuery UI插件的使用技巧,需要的朋友可以參考下2016-06-06
我總是樂于嘗試新工具或利用節(jié)省開發(fā)時(shí)間的資源。由于市面上存在有許多Web開發(fā)工具，你可能很難縮小搜索范圍。2009-02-02
使用jQuery簡化Ajax開發(fā) Ajax開發(fā)入門
jQuery是一個(gè)可以簡化 JavaScript™以及AJAX（Asynchronous JavaScript + XML，異步Javascript和XML）編程的Javascript庫。不同于其他的Javascript庫，jQuery有他自己的哲學(xué)，使你可以 很簡單的編寫代碼。2009-10-10
jquery+ajax每秒向后臺(tái)發(fā)送請(qǐng)求數(shù)據(jù)然后返回頁面的代碼
jquery+ajax每秒向后臺(tái)發(fā)送請(qǐng)求數(shù)據(jù)然后返回頁面（包括jquery頁面加載完畢才執(zhí)行方法）2011-01-01
這篇文章主要介紹了jQuery表單驗(yàn)證的方法,結(jié)合簡單實(shí)例形式分析了jQuery針對(duì)表單必填項(xiàng)進(jìn)行驗(yàn)證的方法,需要的朋友可以參考下2016-10-10
bootstrap table 服務(wù)器端分頁例子分享
這篇文章主要介紹了bootstrap table 服務(wù)器端分頁例子分享,需要的朋友可以參考下2015-02-02