jquery如何設(shè)置文字不間斷滾動(dòng)
jquery設(shè)置文字不間斷滾動(dòng)的方法：1、單行滾動(dòng)，代碼為【$(this).css({marginTop:"0px"}).find("li:first").appendTo()】；2、多行滾動(dòng)，代碼為【Scroll:function()】。
成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的下花園網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
jquery設(shè)置文字不間斷滾動(dòng)的方法：
一、單行滾動(dòng)
<!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>無(wú)標(biāo)題文檔</title> <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;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <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) }); </script> </head> <body> <div id="scrollDiv"> <ul> <li>這是公告標(biāo)題的第一行</li> <li>這是公告標(biāo)題的第二行</li> <li>這是公告標(biāo)題的第三行</li> <li>這是公告標(biāo)題的第四行</li> <li>這是公告標(biāo)題的第五行</li> <li>這是公告標(biāo)題的第六行</li> <li>這是公告標(biāo)題的第七行</li> <li>這是公告標(biāo)題的第八行</li> </ul> </div> </body> </html>二、多行滾動(dòng)
<!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>無(wú)標(biāo)題文檔</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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> //滾動(dòng)插件 (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), //每次滾動(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ù) scrollUp=function(){ _this.animate({ marginTop:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); }); } //鼠標(biāo)事件綁定 _this.hover(function(){ clearInterval(timerID); },function(){ timerID=setInterval("scrollUp()",timer); }).mouseout(); } }) })(jQuery); $(document).ready(function(){ $("#scrollDiv").Scroll({line:4,speed:500,timer:1000}); }); </script> </head> <body> <p>多行滾動(dòng)演示：</p> <div id="scrollDiv"> <ul> <li>這是公告標(biāo)題的第一行</li> <li>這是公告標(biāo)題的第二行</li> <li>這是公告標(biāo)題的第三行</li> <li>這是公告標(biāo)題的第四行</li> <li>這是公告標(biāo)題的第五行</li> <li>這是公告標(biāo)題的第六行</li> <li>這是公告標(biāo)題的第七行</li> <li>這是公告標(biāo)題的第八行</li> </ul> </div> </body> </html>三、可控制向前向后的多行滾動(dòng)
<!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>無(wú)標(biāo)題文檔</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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.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:1000,up:"btn1",down:"btn2"}); }); </script> </head> <body> <p>多行滾動(dòng)演示：</p> <div id="scrollDiv"> <ul> <li>這是公告標(biāo)題的第一行</li> <li>這是公告標(biāo)題的第二行</li> <li>這是公告標(biāo)題的第三行</li> <li>這是公告標(biāo)題的第四行</li> <li>這是公告標(biāo)題的第五行</li> <li>這是公告標(biāo)題的第六行</li> <li>這是公告標(biāo)題的第七行</li> <li>這是公告標(biāo)題的第八行</li> </ul> </div> <span id="btn1">向前</span> <span id="btn2">向后</span> </body> </html>
當(dāng)前名稱(chēng)：jquery如何設(shè)置文字不間斷滾動(dòng)
當(dāng)前網(wǎng)址：http://www.rwnh.cn/article2/cgjpic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站、定制開(kāi)發(fā)、電子商務(wù)、域名注冊(cè)、網(wǎng)站設(shè)計(jì)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 如何選擇你的手機(jī)App軟件開(kāi)發(fā)公司？ 2023-02-24
- 成都網(wǎng)站建造軟件開(kāi)發(fā)公司費(fèi)用報(bào)價(jià)為什么差距如此之大 2016-12-18
- 手機(jī)APP客戶端的軟件開(kāi)發(fā)過(guò)程方式及營(yíng)銷(xiāo)推廣和售后服務(wù)流程等詳細(xì)介紹 2021-05-08
- 什么是軟件開(kāi)發(fā)中的過(guò)度設(shè)計(jì)？ 2016-09-06
- 上海理財(cái)APP軟件開(kāi)發(fā)需要多少錢(qián)？ 2020-11-29
- 軟件開(kāi)發(fā)中的編程如何發(fā)展 2021-05-24
- 為什么要了解手機(jī)app軟件開(kāi)發(fā)的人很多但是真正要開(kāi)發(fā)的人很少 2016-10-28
- app軟件開(kāi)發(fā)公司：電商新零售平臺(tái)應(yīng)該如何開(kāi)發(fā)？ 2020-11-16
- 移動(dòng)應(yīng)用軟件開(kāi)發(fā)方向的大學(xué)生如何規(guī)劃大學(xué)期間的學(xué)習(xí)計(jì)劃 2021-06-12
- 邏輯思維：軟件開(kāi)發(fā)行業(yè)的發(fā)展趨勢(shì) 2016-08-02
- 軟件開(kāi)發(fā)可用性原則 2014-07-24
- 未來(lái)軟件開(kāi)發(fā)五個(gè)新趨勢(shì) 2021-02-07