基于Jquery的文字滾動效果大全

1、基于Jquery的文字滾動跑馬燈插件(一個頁面多個滾動區(qū))兼容各瀏覽器的文本行高 復(fù)制代碼 代碼如下:(function($) $.fn.extend( RollTitle: function(opt,callback) if(!opt) var opt=; var _this = this; _this.timer = null; _this.lineH = _this.find(li:first).height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10); _thi

2、s.speed=opt.speed?parseInt(opt.speed,10):3000, /卷動速度，數(shù)值越大，速度越慢（毫秒 _this.timespan=opt.timespan?parseInt(opt.timespan,13):5000; /滾動的時間間隔（毫秒 if(_this.line=0) this.line=1; _this.upHeight=0-_this.line*_this.lineH; _this.scrollUp=function() _this.animate( marginTop:_this.upHeight ,_this.speed,function() f

3、or(i=1;i=_this.line;i+) _this.find(li:first).appendTo(_this); _this.css(marginTop:0); ); _this.hover(function() clearInterval(_this.timer); ,function() _this.timer=setInterval(function()_this.scrollUp();,_this.timespan); ).mouseout(); ) )(jQuery); 調(diào)用方法： line:一次卷動的文本行數(shù) speed:卷動動畫的時間 timespan:間隔時間 復(fù)制代

4、碼 代碼如下: 文字1 文字2 文字3 文字4 文字5 $(document.body).ready(function() $(#RunTopic).RollTitle(line:1,speed:200,timespan:1500); ); 詳細出處參考：/article/24369.htm文字輪流滾動，jquery幫忙 文字輪流滾動，jquery幫忙，走走停停，一次滾動一行，類似會停頓的走馬燈，但又不完全是，代碼里使用了克隆，不用克隆的話，remove()就沒了。 文字輪流滾動，jquery幫忙 function scroll_news()$(functi

5、on() $(#dvmq li).eq(0).fadeOut(slow,function() / alert($(this).clone().html(); /克隆:不用克隆的話，remove()就沒了。 $(this).clone().appendTo($(this).parent().fadeIn(slow); $(this).remove(); ); );setInterval(scroll_news(),1000); 1,one 2,two 3,three 4,我走一步，停一停！ JS一行多列文字循環(huán)滾動帶停頓 這個代碼很有用哦，可以自動把一個LI列表分為一行三列循環(huán)不間斷滾動，中間有

6、時間間隔，也就是停頓，有不少網(wǎng)站都在用這款代碼哦，這就是從網(wǎng)上直接扒下來的，確實很不錯。 多列文字循環(huán)滾動ul padding-right: 0px;padding-left: 0px;padding-bottom: 0px;margin: 0px;padding-top: 0px#announcement width:100%;overflow: hidden;#announcement div border: #e6e6e6 1px solid;padding:0px 10px 0px 10px;overflow-y:hidden;line-height: 24px;height: 24p

7、x#announcement li font-size: 12px;float: left;list-style-type: none;margin-right: 20px;padding-left: 10px;white-space: nowrap#announcement a text-decoration: none;#announcement a:hover text-decoration:underline; jQuery 類似騰訊網(wǎng)的圖片幻燈特效（可自動播放）VB版增強型Windows任務(wù)管理器JQuery Tip多風格鏈接提示框VC+動態(tài)加載、調(diào)用smtp.dll發(fā)郵件示例VC+

8、連連看游戲源碼附外掛基于API的VB HOOK鉤子攔截程序VB 操作系統(tǒng)的一些常用小技巧集xTree 標準的WEB菜單樹（樹形菜單） function $(id) return document.getElementById(id);var anndelay = 3000;var anncount = 0;var annheight = 24;var annst = 0;function announcementScroll() if( ! annst) $(announcementbody).innerHTML += + $(announcementbody).innerHTML; $(an

9、nouncementbody).scrollTop = 0; if($(announcementbody).scrollHeight annheight * 3) annst = setTimeout(announcementScroll(), anndelay); else $(announcement).onmouseover = $(announcement).onmouseout = null; return; if(anncount = annheight) if($(announcementbody).scrollHeight - annheight = $(announcemen

10、tbody).scrollTop) $(announcementbody).scrollTop = $(announcementbody).scrollHeight / 2 - annheight; anncount = 0; annst = setTimeout(announcementScroll(), anndelay); else $(announcementbody).scrollTop + ; anncount + ; annst = setTimeout(announcementScroll(), 10); announcementScroll();網(wǎng)站公告Js滾動代碼 一段文字

11、的滾動效果，常見于網(wǎng)站公告，鼠標放上停止?jié)L動。 網(wǎng)站公告滾動 Tomat6.0的配置視頻教程，AVI電影格式，相當清淅了，比起圖文版的教程更貼切，不會配置Tomcat的網(wǎng)友，你可不要錯過哦，由于視頻抓圖挺麻煩的，試了多次還是抓了一個不太清淅的，大家將就吧。 很牛的字幕滾動效果 很牛的字幕滾動特效，類似TAB選項卡一樣，如果選項卡內(nèi)的內(nèi)容超過邊界，可以點擊下邊的向上或向下按鈕，控件文字上下滾動，黑色的界面看上去更酷了一些。 很牛的滾動字幕效果 function DynLayer(id,nestref,frame) if (!is.ns5 & !DynLayer.set & !frame) Dyn

12、LayerInit()this.frame = frame | selfif (is.ns) if (is.ns4) if (!frame) if (!nestref) var nestref = DynLayer.nestRefArrayidif (!DynLayerTest(id,nestref) returnthis.css = (nestref)? eval(document.+nestref+.document.+id) : document.layersidelse this.css = (nestref)? eval(frame.document.+nestref+.docume

13、nt.+id) : frame.document.layersidthis.elm = this.event = this.cssthis.doc = this.css.documentelse if (is.ns5) this.elm = document.getElementById(id)this.css = this.elm.stylethis.doc = documentthis.x = this.css.leftthis.y = this.css.topthis.w = this.css.clip.widththis.h = this.css.clip.heightelse if

14、(is.ie) this.elm = this.event = this.frame.document.allidthis.css = this.frame.document.allid.stylethis.doc = documentthis.x = this.elm.offsetLeftthis.y = this.elm.offsetTopthis.w = (is.ie4)? this.css.pixelWidth : this.elm.offsetWidththis.h = (is.ie4)? this.css.pixelHeight : this.elm.offsetHeightthi

15、s.id = idthis.nestref = nestrefthis.obj = id + DynLayereval(this.obj + =this)function DynLayerMoveTo(x,y) if (x!=null) this.x = xif (is.ns) this.css.left = this.xelse this.css.pixelLeft = this.xif (y!=null) this.y = yif (is.ns) this.css.top = this.yelse this.css.pixelTop = this.yfunction DynLayerMov

16、eBy(x,y) this.moveTo(this.x+x,this.y+y)function DynLayerShow() this.css.visibility = (is.ns4)? show : visiblefunction DynLayerHide() this.css.visibility = (is.ns4)? hide : hiddenDynLtotype.moveTo = DynLayerMoveToDynLtotype.moveBy = DynLayerMoveByDynLtotype.show = DynLayerShow

17、DynLtotype.hide = DynLayerHideDynLayerTest = new Function(return true)function DynLayerInit(nestref) if (!DynLayer.set) DynLayer.set = trueif (is.ns) if (nestref) ref = eval(document.+nestref+.document)else nestref = ; ref = document;for (var i=0; i 0) eval(divname.substr(0,index)+ = new Dyn

18、Layer(+divname+,+nestref+)if (ref.layersi.document.layers.length 0) DynLayer.refArrayDynLayer.refArray.length = (nestref=)? : nestref+.document.+if (DynLayer.refArray.i DynLayer.refArray.length) DynLayerInit(DynLayer.refArrayDynLayer.refArray.i+)else if (is.ie) for (

19、var i=0; i 0) eval(divname.substr(0,index)+ = new DynLayer(+divname+)return trueDynLayer.nestRefArray = new Array()DynLayer.refArray = new Array()DynLayer.refArray.i = 0DynLayer.set = falsefunction DynLayerSlideTo(endx,endy,inc,speed,fn) if (endx=null) endx = this.xif (endy=null) endy = this.yvar di

20、stx = endx-this.xvar disty = endy-this.ythis.slideStart(endx,endy,distx,disty,inc,speed,fn)function DynLayerSlideBy(distx,disty,inc,speed,fn) var endx = this.x + distxvar endy = this.y + distythis.slideStart(endx,endy,distx,disty,inc,speed,fn)function DynLayerSlideStart(endx,endy,distx,disty,inc,spe

21、ed,fn) if (this.slideActive) returnif (!inc) inc = 10if (!speed) speed = 20var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2)/incif (num=0) returnvar dx = distx/numvar dy = disty/numif (!fn) fn = nullthis.slideActive = truethis.slide(dx,dy,endx,endy,num,1,speed,fn)function DynLayerSlide(dx,dy

22、,endx,endy,num,i,speed,fn) if (!this.slideActive) returnif (i+ =4)this.ns4 = (this.b=ns & this.v=4)this.ns5 = (this.b=ns & this.v=5)this.ie = (this.b=ie & this.v=4)this.ie4 = (this.version.indexOf(MSIE 4)0)this.ie5 = (this.version.indexOf(MSIE 5)0)this.min = (this.ns|this.ie)is = new BrowserCheck()f

23、unction css(id,left,top,width,height,color,vis,z,other) if (id=START) return nelse if (id=END) return var str = (left!=null & top!=null)? #+id+ position:absolute; left:+left+px; top:+top+px; : #+id+ position:relative;if (arguments.length=4 & width!=null) str += width:+width+px;if (arguments.length=5

24、 & height!=null) str += height:+height+px;if (arguments.length=6 & color!=null) str += (is.ns)? layer-background-color:+color+; : background-color:+color+;if (arguments.length=7 & vis!=null) str += visibility:+vis+;if (arguments.length=8 & z!=null) str += z-index:+z+;if (arguments.length=9 & other!=

25、null) str += +otherstr += nreturn strfunction writeCSS(str,showAlert) str = css(START)+str+css(END)document.write(str)if (showAlert) alert(str)function MiniScroll(window,content) this.window = windowthis.content = contentthis.inc = 8this.speed = 20this.contentHeight = (is.ns)? this.content.doc.heigh

26、t : this.content.elm.scrollHeightthis.contentWidth = (is.ns)? this.content.doc.width : this.content.elm.scrollWidththis.up = MiniScrollUpthis.down = MiniScrollDownthis.left = MiniScrollLeftthis.right = MiniScrollRightthis.stop = MiniScrollStopthis.activate = MiniScrollActivatethis.activate(this.cont

27、entWidth,this.contentHeight)function MiniScrollActivate() this.offsetHeight = this.contentHeight-this.window.hthis.offsetWidth = this.contentWidth-this.window.wthis.enableVScroll = (this.offsetHeight0)this.enableHScroll = (this.offsetWidth0)function MiniScrollUp() if (this.enableVScroll) this.conten

28、t.slideTo(null,0,this.inc,this.speed)function MiniScrollDown() if (this.enableVScroll) this.content.slideTo(null,-this.offsetHeight,this.inc,this.speed)function MiniScrollLeft() if (this.enableHScroll) this.content.slideTo(0,null,this.inc,this.speed)function MiniScrollRight() if (this.enableHScroll)

29、 this.content.slideTo(-this.offsetWidth,null,this.inc,this.speed)function MiniScrollStop() this.content.slideActive = false!-function init() pulloutContent = new Array()pulloutWindow = new Array()pulloutScroll = new Array()for (var i=0;iA FONT-SIZE: 10pt; COLOR: #; FONT-FAMILY: ArialA.scroll COLOR:

30、#ffffffSTRONG FONT-WEIGHT: bold; FONT-SIZE: 15pt; LINE-HEIGHT: 25pt; FONT-FAMILY: ArialP FONT-SIZE: 10pt; LINE-HEIGHT: 13pt; FONT-FAMILY: Arial#pulloutInterface LEFT: 50px; WIDTH: 400px; CLIP: rect(0px 400px 250px 0px); POSITION: absolute; TOP: 50px; HEIGHT: 250px; BACKGROUND-COLOR: #; layer-backgro

31、und-color: #pullout0Sidebar LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 5px; HEIGHT: 30px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE#pullout1Sidebar LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 40px; HEIGHT:

32、30px; BACKGROUND-COLOR: #c5c5c5; layer-background-color: #C5C5C5#pullout2Sidebar LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 75px; HEIGHT: 30px; BACKGROUND-COLOR: #a2a2a2; layer-background-color: #A2A2A2#pullout3Sidebar LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 10

33、0px 30px 0px); POSITION: absolute; TOP: 110px; HEIGHT: 30px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E#pullout4Sidebar LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 145px; HEIGHT: 30px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E#pu

34、lloutUpDown LEFT: 5px; POSITION: absolute; TOP: 200px#pulloutViewArea LEFT: 110px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 5px; HEIGHT: 240px; BACKGROUND-COLOR: #; layer-background-color: #pullout0Window LEFT: 0px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE#pullout0Conten