一個(gè)jquery實(shí)現(xiàn)的不錯(cuò)的多行文字圖片滾動(dòng)效果
今兒分享一個(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
實(shí)例演示
代碼如下
<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)
- jquery實(shí)現(xiàn)多行文字圖片滾動(dòng)效果示例代碼
- JQuery 圖片滾動(dòng)輪播示例代碼
- jquery實(shí)現(xiàn)圖片滾動(dòng)效果的簡(jiǎn)單實(shí)例
- jQuery圖片滾動(dòng)圖片的效果(另類(lèi)實(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是用來(lái)干什么的 jquery其實(shí)就是一個(gè)js框架
jQuery是一bai個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù),可用于du簡(jiǎn)化zhi事件處理,HTML文檔遍歷,Ajax交互和dao動(dòng)畫(huà),以更快速開(kāi)發(fā)網(wǎng)站2021-02-02jQuery 循環(huán)遍歷改變a標(biāo)簽的href(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jQuery 循環(huán)遍歷改變a標(biāo)簽的href(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(放大縮?。?/a>
本篇文章主要對(duì)jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(放大縮?。┑氖褂米隽撕?jiǎn)要分析說(shuō)明。需要的朋友來(lái)看下吧2016-12-12jQuery組件easyui對(duì)話(huà)框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery組件easyui對(duì)話(huà)框?qū)崿F(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(同步顯示圖像位置信息)
本篇文章主要對(duì)jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(同步顯示圖像位置信息)的使用做了簡(jiǎn)要分析說(shuō)明。需要的朋友來(lái)看下吧,希望對(duì)大家有所幫助2016-12-12使用JQuery實(shí)現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了使用JQuery實(shí)現(xiàn)Ctrl+Enter提交表單的方法,需要的朋友可以參考下2015-10-10