使用jquery實現(xiàn)的循環(huán)連續(xù)可停頓滾動實例
使用jquery實現(xiàn)的循環(huán)連續(xù)可停頓滾動,并應(yīng)用于滾動圖片,滾動層。記得一定要有jquery庫哦~
一、單行滾動
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>無標題文檔</title> <mce:style type="text/css"><!-- ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;}</style> <mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- function AutoScroll(obj){ $(obj).find("ul:first").animate({ marginTop:"-25px" },500,function(){ $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); }); } $(document).ready(function(){ setInterval('AutoScroll("#scrollDiv")',1000) }); // --></mce:script> </head> <body> <div id="scrollDiv"> <ul> <li>這是公告標題的第一行</li> <li>這是公告標題的第二行</li> <li>這是公告標題的第三行</li> <li>這是公告標題的第四行</li> <li>這是公告標題的第五行</li> <li>這是公告標題的第六行</li> <li>這是公告標題的第七行</li> <li>這是公告標題的第八行</li> </ul> </div> </body> </html>
二、多行滾動
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <mce:style type="text/css"><!-- ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;}</style> <mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- //滾動插件 (function($){ $.fn.extend({ Scroll:function(opt,callback){ //參數(shù)初始化 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), //每次滾動的行數(shù),默認為一屏,即父容器高度 speed=opt.speed?parseInt(opt.speed,10):500, //卷動速度,數(shù)值越大,速度越慢(毫秒) timer=opt.timer?parseInt(opt.timer,10):3000; //滾動的時間間隔(毫秒) if(line==0) line=1; var upHeight=0-line*lineH; //滾動函數(shù) 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:500,timer:1000}); }); // --></mce:script> </head> <body> <p>多行滾動演示:</p> <div id="scrollDiv"> <ul> <li>這是公告標題的第一行</li> <li>這是公告標題的第二行</li> <li>這是公告標題的第三行</li> <li>這是公告標題的第四行</li> <li>這是公告標題的第五行</li> <li>這是公告標題的第六行</li> <li>這是公告標題的第七行</li> <li>這是公告標題的第八行</li> </ul> </div> </body> </html>
三、可控制向前向后的多行滾動
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <mce:style type="text/css"><!-- ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;}</style> <mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- (function($){ $.fn.extend({ Scroll:function(opt,callback){ //參數(shù)初始化 if(!opt) var opt={}; var _btnUp = $("#"+ opt.up);//Shawphy:向上按鈕 var _btnDown = $("#"+ opt.down);//Shawphy:向下按鈕 var timerID; 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), //每次滾動的行數(shù),默認為一屏,即父容器高度 speed=opt.speed?parseInt(opt.speed,10):500; //卷動速度,數(shù)值越大,速度越慢(毫秒) timer=opt.timer //?parseInt(opt.timer,10):3000; //滾動的時間間隔(毫秒) if(line==0) line=1; var upHeight=0-line*lineH; //滾動函數(shù) var scrollUp=function(){ _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按鈕的函數(shù)綁定 _this.animate({ marginTop:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); _btnUp.bind("click",scrollUp); //Shawphy:綁定向上按鈕的點擊事件 }); } //Shawphy:向下翻頁函數(shù) var scrollDown=function(){ _btnDown.unbind("click",scrollDown); for(i=1;i<=line;i++){ _this.find("li:last").show().prependTo(_this); } _this.css({marginTop:upHeight}); _this.animate({ marginTop:0 },speed,function(){ _btnDown.bind("click",scrollDown); }); } //Shawphy:自動播放 var autoPlay = function(){ if(timer)timerID = window.setInterval(scrollUp,timer); }; var autoStop = function(){ if(timer)window.clearInterval(timerID); }; //鼠標事件綁定 _this.hover(autoStop,autoPlay).mouseout(); _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠標事件綁定 _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay); } }) })(jQuery); $(document).ready(function(){ $("#scrollDiv").Scroll({line:4,speed:500,timer:1000,up:"btn1",down:"btn2"}); }); // --></mce:script> </head> <body> <p>多行滾動演示:</p> <div id="scrollDiv"> <ul> <li>這是公告標題的第一行</li> <li>這是公告標題的第二行</li> <li>這是公告標題的第三行</li> <li>這是公告標題的第四行</li> <li>這是公告標題的第五行</li> <li>這是公告標題的第六行</li> <li>這是公告標題的第七行</li> <li>這是公告標題的第八行</li> </ul> </div> <span id="btn1">向前</span> <span id="btn2">向后</span> </body> </html>
以上這篇使用jquery實現(xiàn)的循環(huán)連續(xù)可停頓滾動實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery切換網(wǎng)頁皮膚并保存到Cookie示例代碼
這篇文章主要介紹通過jQuery切換網(wǎng)頁皮膚并將狀態(tài)保存到Cookie的相關(guān)代碼,需要的朋友可以參考下2014-06-06關(guān)于jquery動態(tài)增減控件的一些想法和小插件
這段代碼壓縮到100行內(nèi),而且擴展方便,可以非常輕松的增減控件的數(shù)量,使用非常簡單。2010-08-08jQuery動態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動態(tài)生成不規(guī)則表格的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-02-02推薦40個簡單的 jQuery 導(dǎo)航插件和教程(下篇)
在下面的集合中,你會發(fā)現(xiàn)很多便利的 jQuery 導(dǎo)航插件和有用的教程,幫助你實現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航,讓你網(wǎng)站更有組織性和交互性2012-09-09JQuery入門——事件切換之hover()方法應(yīng)用介紹
謂切換事件,即有兩個以上的事件綁定于一個元素,在元素的行為動作間進行切換,有兩個方法用于事件的切換,一個方法是hover(),另一個是toggle(),感興趣的朋友不妨了解下,或許對你有所幫助2013-02-02