jquery實(shí)現(xiàn)多行文字圖片滾動(dòng)效果示例代碼
更新時(shí)間:2014年10月10日 17:28:41 投稿:whsnow
多行文字圖片滾動(dòng)效果的實(shí)現(xiàn)方法有很多,本例與大家分享的是jquery實(shí)現(xiàn)的具體步驟,很實(shí)用的
今兒分享一個(gè)jquery實(shí)現(xiàn)多行滾動(dòng)效果。
我看一些論壇網(wǎng)站上面,公告處用的較多。
代碼如下
// 多行滾動(dòng) (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), speed=opt.speed?parseInt(opt.speed,10):1000, //卷動(dòng)速度,數(shù)值越大,速度越慢(毫秒) timer=opt.timer?parseInt(opt.timer,10):5000; //滾動(dòng)的時(shí)間間隔(毫秒) if(line==0) line=1; var upHeight=0-line*lineH; scrollUp=function(){ _this.animate({ marginTop:upHeight },speed,function(){ for(i=1;i
代碼如下
<div id="scrollDiv"> <ul> <li>我是jquery多行滾動(dòng)條一</li> <li>我是jquery多行滾動(dòng)條二</li> <li>我是jquery多行滾動(dòng)條三</li> <li>我是jquery多行滾動(dòng)條四</li> <li>我是jquery多行滾動(dòng)條五</li> <li>我是jquery多行滾動(dòng)條六</li> <li>我是jquery多行滾動(dòng)條七</li> <li>我是jquery多行滾動(dòng)條八</li> </ul> </div>
<script type="text/javascript" src="http:/(www.dbjr.com.cn)/ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> // 多行滾動(dòng) (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), speed=opt.speed?parseInt(opt.speed,10):1000, //卷動(dòng)速度,數(shù)值越大,速度越慢(毫秒) timer=opt.timer?parseInt(opt.timer,10):5000; //滾動(dòng)的時(shí)間間隔(毫秒) if(line==0) line=1; var upHeight=0-line*lineH; scrollUp=function(){ _this.animate({ marginTop:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); }); } _this.hover(function(){ clearInterval(timerID); },function(){ timerID=setInterval("scrollUp()",timer); }).mouseout(); } }) })(jQuery); $(document).ready(function(){ $("#scrollDiv").Scroll({line:4,speed:1000,timer:2000}); }); </script>
您可能感興趣的文章:
- jquery圖片滾動(dòng)放大代碼分享(2)
- jquery圖片滾動(dòng)放大代碼分享(1)
- 一個(gè)jquery實(shí)現(xiàn)的不錯(cuò)的多行文字圖片滾動(dòng)效果
- JQuery 圖片滾動(dòng)輪播示例代碼
- jquery實(shí)現(xiàn)圖片滾動(dòng)效果的簡單實(shí)例
- jQuery圖片滾動(dòng)圖片的效果(另類實(shí)現(xiàn))
- jQuery bxCarousel實(shí)現(xiàn)圖片滾動(dòng)切換效果示例代碼
- Jquery圖片滾動(dòng)與幻燈片的實(shí)例代碼
- jQuery+css實(shí)現(xiàn)圖片滾動(dòng)效果(附源碼)
- jquery實(shí)現(xiàn)圖片平滑滾動(dòng)詳解
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)拖拽登錄框移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)拖拽登錄框移動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09自己動(dòng)手制作基于jQuery的Web頁面加載進(jìn)度條插件
進(jìn)度條插件在GitHub上多種多樣數(shù)量繁多,這總結(jié)出頁面進(jìn)度條插件的實(shí)現(xiàn)要點(diǎn),來教大家自己動(dòng)手制作基于jQuery的Web頁面加載進(jìn)度條插件2016-06-06jQuery加PHP實(shí)現(xiàn)圖片上傳并提交的示例代碼
這篇文章主要介紹了jQuery加PHP實(shí)現(xiàn)圖片上傳并提交的實(shí)例,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07JQuery解析HTML、JSON和XML實(shí)例詳解
JQuery具有強(qiáng)大的解析數(shù)據(jù)的能力,本文詳細(xì)介紹HTML、JSON和XML格式的文件的數(shù)據(jù)如何解析2014-03-03jQuery實(shí)現(xiàn)的淡入淡出與滑入滑出效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的淡入淡出與滑入滑出效果,結(jié)合實(shí)例形式分析了jQuery中fadeIn、fadeOut、slideDown及slideUp方法相關(guān)使用技巧,需要的朋友可以參考下2018-04-04jquery 學(xué)習(xí)之二 屬性相關(guān)
jquery 學(xué)習(xí)之二 屬性相關(guān)資料,學(xué)習(xí)jquery的朋友可以參考下。2010-11-11