jQuery實(shí)現(xiàn)帶有上下控制按鈕的簡(jiǎn)單多行滾屏效果代碼
本文實(shí)例講述了jQuery實(shí)現(xiàn)帶有上下控制按鈕的簡(jiǎn)單多行滾屏效果代碼。分享給大家供大家參考。具體如下:
這里使用了jQuery插件來實(shí)現(xiàn)最簡(jiǎn)單的多行文字滾屏效果,還帶有上下滾動(dòng)控制按鈕,卷動(dòng)速度,數(shù)值越大,速度越慢(毫秒),滾動(dòng)的時(shí)間間隔是(毫秒),每次滾動(dòng)的行數(shù),默認(rèn)為一屏,即父容器高度……
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-up-down-scroll-src-style-codes/
具體代碼如下:
<!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>用jQuery實(shí)現(xiàn)最簡(jiǎn)單的滾屏效果,加了上下按鈕</title> <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;} </style> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <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), //每次滾動(dòng)的行數(shù),默認(rèn)為一屏,即父容器高度 speed=opt.speed?parseInt(opt.speed,10):500; //卷動(dòng)速度,數(shù)值越大,速度越慢(毫秒) timer=opt.timer //?parseInt(opt.timer,10):3000; //滾動(dòng)的時(shí)間間隔(毫秒) if(line==0) line=1; var upHeight=0-line*lineH; //滾動(dòng)函數(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:綁定向上按鈕的點(diǎn)擊事件 }); } //Shawphy:向下翻頁(yè)函數(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:自動(dòng)播放 var autoPlay = function(){ if(timer)timerID = window.setInterval(scrollUp,timer); }; var autoStop = function(){ if(timer)window.clearInterval(timerID); }; //鼠標(biāo)事件綁定 _this.hover(autoStop,autoPlay).mouseout(); _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠標(biāo)事件綁定 _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay); } }) })(jQuery); $(document).ready(function(){ $("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn1",down:"btn2"}); }); </script> </head> <body> <p>多行滾動(dòng)演示:</p> <div id="scrollDiv"> <ul> <li><a href="" target="_blank">信言企業(yè)公司建站程序 v1</a></li> <li><a href="" target="_blank">EPffms 環(huán)保時(shí)代ASP家庭財(cái)務(wù)管理系統(tǒng) v5.0</a></li> <li><a href="" target="_blank">jQuery兩幅圖像動(dòng)畫疊加的效果</a></li> <li><a href="" target="_blank">Android 滑動(dòng)提示、菜單及列表等小程序源碼</a></li> <li><a href="" target="_blank">Maxcms 馬克斯電影視頻系統(tǒng) v4.0</a></li> <li><a href="" target="_blank">DedeCms v5.7 GBK</a></li> <li><a href="" target="_blank">DedeCms v5.7 UTF-8</a></li> <li><a href="" target="_blank">Piwik PHP站點(diǎn)流量統(tǒng)計(jì)系統(tǒng) v1.2.1</a></li> </ul> </div> <span id="btn2">向上</span> <span id="btn1">向下</span> </body> </html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)垂直半透明手風(fēng)琴特效代碼分享
這是一款jquery hover抽屜式導(dǎo)航圖片展開收縮切換特效代碼,用戶還可以自定義對(duì)應(yīng)幻燈片的標(biāo)題與文字說明,是一款非常實(shí)用的幻燈片特效源碼。2015-08-08基于jquery的用鼠標(biāo)畫出可移動(dòng)的div
這個(gè)測(cè)試用例的div移動(dòng)出了點(diǎn)問題,因?yàn)槭堑谝淮问褂胘sfiddle網(wǎng)站,所以用的不是很熟悉,還希望高手指點(diǎn)2012-09-09jquery中的sortable排序之后的保存狀態(tài)的解決方法
其實(shí)在前年的這個(gè)時(shí)候,我就有用過這個(gè)sortable組件,那時(shí)候搞了個(gè)個(gè)人網(wǎng)站(可惜后來關(guān)了),首頁(yè)就用到了這種拖拽的效果。2010-01-01jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹
這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)jQuery-form.js實(shí)現(xiàn)異步上傳文件
jquery.form.js是一個(gè)非常強(qiáng)大的用于表單提交的插件。這篇文章主要介紹了jQuery實(shí)現(xiàn)jQuery-form.js實(shí)現(xiàn)異步上傳文件,有興趣的可以了解一下。2017-04-04