話不多說,請看代碼:
創(chuàng)新互聯(lián)公司網(wǎng)站設計,為客戶量身定制各類網(wǎng)站建設業(yè)務,包括企業(yè)型、電子商務型、響應式網(wǎng)站建設、行業(yè)門戶型等各類網(wǎng)站,實戰(zhàn)經(jīng)驗豐富,成功案例眾多。以客戶利益為出發(fā)點,創(chuàng)新互聯(lián)公司網(wǎng)站制作為客戶規(guī)劃、按需開發(fā)符合企業(yè)需求、帶有營銷價值的網(wǎng)絡建站方案認真對待每一個客戶,我們不用口頭的語言來吹擂我們的優(yōu)秀,數(shù)千家的成功案例見證著我們的成長。
<!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=utf-8" /> <title>多行滾動jQuery循環(huá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 src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <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:1,speed:500,timer:1000});//可修改line值,speed值,timer值 }); </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> ***請再次刷新查看效果,或保存到本地瀏覽***
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持創(chuàng)新互聯(lián)!
網(wǎng)站名稱:js實現(xiàn)文本上下來回滾動
網(wǎng)頁鏈接:http://muchs.cn/article14/jejhde.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供響應式網(wǎng)站、品牌網(wǎng)站設計、面包屑導航、、網(wǎng)站導航、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)