字幕滚动效果

技术文章

字幕滚动效果

时间：2008-10-08 点击：1304

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>字幕滚动效果</title>
</head>

<SCRIPT language=JavaScript>
function DynLayer(id,nestref,frame) {
	if (!is.ns5 && !DynLayer.set && !frame) DynLayerInit()
	this.frame = frame || self
	if (is.ns) {
		if (is.ns4) {
			if (!frame) {
				if (!nestref) var nestref = DynLayer.nestRefArray[id]
				if (!DynLayerTest(id,nestref)) return
				this.css = (nestref)? eval("document."+nestref+".document."+id) : document.layers[id]
			}
			else this.css = (nestref)? eval("frame.document."+nestref+".document."+id) : frame.document.layers[id]
			this.elm = this.event = this.css
			this.doc = this.css.document
		}
		else if (is.ns5) {
			this.elm = document.getElementById(id)
			this.css = this.elm.style
			this.doc = document
		}
		this.x = this.css.left
		this.y = this.css.top
		this.w = this.css.clip.width
		this.h = this.css.clip.height
	}
	else if (is.ie) {
		this.elm = this.event = this.frame.document.all[id]
		this.css = this.frame.document.all[id].style
		this.doc = document
		this.x = this.elm.offsetLeft
		this.y = this.elm.offsetTop
		this.w = (is.ie4)? this.css.pixelWidth : this.elm.offsetWidth
		this.h = (is.ie4)? this.css.pixelHeight : this.elm.offsetHeight
	}
	this.id = id
	this.nestref = nestref
	this.obj = id + "DynLayer"
	eval(this.obj + "=this")
}
function DynLayerMoveTo(x,y) {
	if (x!=null) {
		this.x = x
		if (is.ns) this.css.left = this.x
		else this.css.pixelLeft = this.x
	}
	if (y!=null) {
		this.y = y
		if (is.ns) this.css.top = this.y
		else this.css.pixelTop = this.y
	}
}
function DynLayerMoveBy(x,y) {
	this.moveTo(this.x+x,this.y+y)
}
function DynLayerShow() {
	this.css.visibility = (is.ns4)? "show" : "visible"
}
function DynLayerHide() {
	this.css.visibility = (is.ns4)? "hide" : "hidden"
}
DynLayer.prototype.moveTo = DynLayerMoveTo
DynLayer.prototype.moveBy = DynLayerMoveBy
DynLayer.prototype.show = DynLayerShow
DynLayer.prototype.hide = DynLayerHide
DynLayerTest = new Function('return true')

// DynLayerInit Function
function DynLayerInit(nestref) {
	if (!DynLayer.set) DynLayer.set = true
	if (is.ns) {
		if (nestref) ref = eval('document.'+nestref+'.document')
		else {nestref = ''; ref = document;}
		for (var i=0; i<ref.layers.length; i++) {
			var divname = ref.layers[i].name
			DynLayer.nestRefArray[divname] = nestref
			var index = divname.indexOf("Div")
			if (index > 0) {
				eval(divname.substr(0,index)+' = new DynLayer("'+divname+'","'+nestref+'")')
			}
			if (ref.layers[i].document.layers.length > 0) {
				DynLayer.refArray[DynLayer.refArray.length] = (nestref=='')? ref.layers[i].name : nestref+'.document.'+ref.layers[i].name
			}
		}
		if (DynLayer.refArray.i < DynLayer.refArray.length) {
			DynLayerInit(DynLayer.refArray[DynLayer.refArray.i++])
		}
	}
	else if (is.ie) {
		for (var i=0; i<document.all.tags("DIV").length; i++) {
			var divname = document.all.tags("DIV")[i].id
			var index = divname.indexOf("Div")
			if (index > 0) {
				eval(divname.substr(0,index)+' = new DynLayer("'+divname+'")')
			}
		}
	}
	return true
}
DynLayer.nestRefArray = new Array()
DynLayer.refArray = new Array()
DynLayer.refArray.i = 0
DynLayer.set = false

// Slide Methods
function DynLayerSlideTo(endx,endy,inc,speed,fn) {
	if (endx==null) endx = this.x
	if (endy==null) endy = this.y
	var distx = endx-this.x
	var disty = endy-this.y
	this.slideStart(endx,endy,distx,disty,inc,speed,fn)
}
function DynLayerSlideBy(distx,disty,inc,speed,fn) {
	var endx = this.x + distx
	var endy = this.y + disty
	this.slideStart(endx,endy,distx,disty,inc,speed,fn)
}
function DynLayerSlideStart(endx,endy,distx,disty,inc,speed,fn) {
	if (this.slideActive) return
	if (!inc) inc = 10
	if (!speed) speed = 20
	var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc
	if (num==0) return
	var dx = distx/num
	var dy = disty/num
	if (!fn) fn = null
	this.slideActive = true
	this.slide(dx,dy,endx,endy,num,1,speed,fn)
}
function DynLayerSlide(dx,dy,endx,endy,num,i,speed,fn) {
	if (!this.slideActive) return
	if (i++ < num) {
		this.moveBy(dx,dy)
		this.onSlide()
		if (this.slideActive) setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+num+","+i+","+speed+",\""+fn+"\")",speed)
		else this.onSlideEnd()
	}
	else {
		this.slideActive = false
		this.moveTo(endx,endy)
		this.onSlide()
		this.onSlideEnd()
		eval(fn)
	}
}
function DynLayerSlideInit() {}
DynLayer.prototype.slideInit = DynLayerSlideInit
DynLayer.prototype.slideTo = DynLayerSlideTo
DynLayer.prototype.slideBy = DynLayerSlideBy
DynLayer.prototype.slideStart = DynLayerSlideStart
DynLayer.prototype.slide = DynLayerSlide
DynLayer.prototype.onSlide = new Function()
DynLayer.prototype.onSlideEnd = new Function()

// Clip Methods
function DynLayerClipInit(clipTop,clipRight,clipBottom,clipLeft) {
	if (is.ie) {
		if (arguments.length==4) this.clipTo(clipTop,clipRight,clipBottom,clipLeft)
		else if (is.ie4) this.clipTo(0,this.css.pixelWidth,this.css.pixelHeight,0)
	}
}
function DynLayerClipTo(t,r,b,l) {
	if (t==null) t = this.clipValues('t')
	if (r==null) r = this.clipValues('r')
	if (b==null) b = this.clipValues('b')
	if (l==null) l = this.clipValues('l')
	if (is.ns) {
		this.css.clip.top = t
		this.css.clip.right = r
		this.css.clip.bottom = b
		this.css.clip.left = l
	}
	else if (is.ie) this.css.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}
function DynLayerClipBy(t,r,b,l) {
	this.clipTo(this.clipValues('t')+t,this.clipValues('r')+r,this.clipValues('b')+b,this.clipValues('l')+l)
}
function DynLayerClipValues(which) {
	if (is.ie) var clipv = this.css.clip.split("rect(")[1].split(")")[0].split("px")
	if (which=="t") return (is.ns)? this.css.clip.top : Number(clipv[0])
	if (which=="r") return (is.ns)? this.css.clip.right : Number(clipv[1])
	if (which=="b") return (is.ns)? this.css.clip.bottom : Number(clipv[2])
	if (which=="l") return (is.ns)? this.css.clip.left : Number(clipv[3])
}
DynLayer.prototype.clipInit = DynLayerClipInit
DynLayer.prototype.clipTo = DynLayerClipTo
DynLayer.prototype.clipBy = DynLayerClipBy
DynLayer.prototype.clipValues = DynLayerClipValues

// Write Method
function DynLayerWrite(html) {
	if (is.ns) {
		this.doc.open()
		this.doc.write(html)
		this.doc.close()
	}
	else if (is.ie) {
		this.event.innerHTML = html
	}
}
DynLayer.prototype.write = DynLayerWrite

// BrowserCheck Object
function BrowserCheck() {
	var b = navigator.appName
	if (b=="Netscape") this.b = "ns"
	else if (b=="Microsoft Internet Explorer") this.b = "ie"
	else this.b = b
	this.version = navigator.appVersion
	this.v = parseInt(this.version)
	this.ns = (this.b=="ns" && this.v>=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()

// CSS Function
function css(id,left,top,width,height,color,vis,z,other) {
	if (id=="START") return '<STYLE TYPE="text/css">\n'
	else if (id=="END") return '</STYLE>'
	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 && height!=null) {
		str += ' height:'+height+'px;'
		if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);'
	}
	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!=null) str += ' '+other
	str += '}\n'
	return str
}
function writeCSS(str,showAlert) {
	str = css('START')+str+css('END')
	document.write(str)
	if (showAlert) alert(str)
}

</SCRIPT>

<SCRIPT language=JavaScript>
function MiniScroll(window,content) {
	this.window = window
	this.content = content
	this.inc = 8
	this.speed = 20
	this.contentHeight = (is.ns)? this.content.doc.height : this.content.elm.scrollHeight
	this.contentWidth = (is.ns)? this.content.doc.width : this.content.elm.scrollWidth
	this.up = MiniScrollUp
	this.down = MiniScrollDown
	this.left = MiniScrollLeft
	this.right = MiniScrollRight
	this.stop = MiniScrollStop
	this.activate = MiniScrollActivate
	this.activate(this.contentWidth,this.contentHeight)
}
function MiniScrollActivate() {
	this.offsetHeight = this.contentHeight-this.window.h
	this.offsetWidth = this.contentWidth-this.window.w
	this.enableVScroll = (this.offsetHeight>0)
	this.enableHScroll = (this.offsetWidth>0)
}
function MiniScrollUp() {
	if (this.enableVScroll) this.content.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) this.content.slideTo(-this.offsetWidth,null,this.inc,this.speed)
}
function MiniScrollStop() {
	this.content.slideActive = false
}

</SCRIPT>

<SCRIPT language=JavaScript>
<!--

function init() 
{
pulloutContent = new Array()
pulloutWindow = new Array()
pulloutScroll = new Array()	
for (var i=0;i<=4;i++) {
		
pulloutContent[i] = new DynLayer('pullout'+i+'Content')
pulloutWindow[i] = new DynLayer('pullout'+i+'Window')
pulloutWindow[i].slideInit()
pulloutScroll[i] = new MiniScroll(pulloutWindow[i],pulloutContent[i])
}
pulloutShown = 0
}
function pulloutStart(i) {
if (i!=pulloutShown) {
pulloutActive = true
pulloutWindow[pulloutShown].slideTo(-285,null,15,15,'pulloutEnd('+i+')')
	}
}
function pulloutEnd(i) {
pulloutShown = i
pulloutWindow[i].slideTo(0,null,15,15,'pulloutActive==false')
}
//-->
</SCRIPT>

<STYLE type=text/css>A {
	FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: 'Arial'
}
A.scroll {
	COLOR: #ffffff
}
STRONG {
	FONT-WEIGHT: bold; FONT-SIZE: 15pt; LINE-HEIGHT: 25pt; FONT-FAMILY: 'Arial'
}
P {
	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: #000000; layer-background-color: #000000
}
#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: 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 100px 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
}
#pulloutUpDown {
	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: #000000; layer-background-color: #000000
}
#pullout0Window {
	LEFT: 0px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE
}
#pullout0Content {
	LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout1Window {
	LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #c5c5c5; layer-background-color: #C5C5C5
}
#pullout1Content {
	LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout2Window {
	LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #a2a2a2; layer-background-color: #A2A2A2
}
#pullout2Content {
	LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout3Window {
	LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E
}
#pullout3Content {
	LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout4Window {
	LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E
}
#pullout4Content {
	LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
</STYLE>
<DIV id=pulloutInterface>
<DIV id=pullout0Sidebar>
<P align=center><A href="javascript:pulloutStart(0)">第一页</A></P></DIV>
<DIV id=pullout1Sidebar>
<P align=center><A href="javascript:pulloutStart(1)">第二页</A></P></DIV>
<DIV id=pullout2Sidebar>
<P align=center><A href="javascript:pulloutStart(2)">第三页</A></P></DIV>
<DIV id=pullout3Sidebar>
<P align=center><A href="javascript:pulloutStart(3)">第四页</A></P></DIV>
<DIV id=pullout4Sidebar>
<P align=center><A href="javascript:pulloutStart(4)">第五页</A></P></DIV>
<DIV id=pulloutUpDown><A onmouseup=pulloutScroll[pulloutShown].stop() 
class=scroll onmousedown=pulloutScroll[pulloutShown].up() 
onmouseout=pulloutScroll[pulloutShown].stop() 
href="javascript://%20Scroll%20Up">向上</A> <BR><A 
onmouseup=pulloutScroll[pulloutShown].stop() class=scroll 
onmousedown=pulloutScroll[pulloutShown].down() 
onmouseout=pulloutScroll[pulloutShown].stop() 
href="javascript://%20Scroll%20Down">向下</A> </DIV>
<DIV id=pulloutViewArea>
<DIV id=pullout0Window>
<DIV id=pullout0Content>
<DIV align=center><STRONG>第一页</STRONG></DIV>
<TABLE width=275 border=0>
  <TBODY>
  <TR>
    <TD>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout1Window>
<DIV id=pullout1Content>
<DIV align=center><STRONG>第二页</STRONG></DIV>
<TABLE width=275 border=0>
  <TBODY>
  <TR>
    <TD>
      <P>This is item number 1. This text is here to fill up space. This is item 
      number 1. This text is here to fill up space. This is item number 1. This 
      text is here to fill up space. This is item number 1. This text is here to 
      fill up space.</P>
      <P>This is item number 1. This text is here to fill up space. This is item 
      number 1. This text is here to fill up space. This is item number 1. This 
      text is here to fill up space. This is item number 1. This text is here to 
      fill up space.</P>
      <P>This is item number 1. This text is here to fill up space. This is item 
      number 1. This text is here to fill up space. This is item number 1. This 
      text is here to fill up space. This is item number 1. This text is here to 
      fill up space.</P>
      <P>This is item number 1. This text is here to fill up space. This is item 
      number 1. This text is here to fill up space. This is item number 1. This 
      text is here to fill up space. This is item number 1. This text is here to 
      fill up space.</P>
      <P>This is item number 1. This text is here to fill up space. This is item 
      number 1. This text is here to fill up space. This is item number 1. This 
      text is here to fill up space. This is item number 1. This text is here to 
      fill up space.</P>
      <P>This is item number 1. This text is here to fill up space. This is item 
      number 1. This text is here to fill up space. This is item number 1. This 
      text is here to fill up space. This is item number 1. This text is here to 
      fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout2Window>
<DIV id=pullout2Content>
<DIV align=center><STRONG>第三页</STRONG></DIV>
<TABLE width=275 border=0>
  <TBODY>
  <TR>
    <TD>
      <P>This is item number 2. This text is here to fill up space. This is item 
      number 2. This text is here to fill up space. This is item number 2. This 
      text is here to fill up space. This is item number 2. This text is here to 
      fill up space.</P>
      <P>This is item number 2. This text is here to fill up space. This is item 
      number 2. This text is here to fill up space. This is item number 2. This 
      text is here to fill up space. This is item number 2. This text is here to 
      fill up space.</P>
      <P>This is item number 2. This text is here to fill up space. This is item 
      number 2. This text is here to fill up space. This is item number 2. This 
      text is here to fill up space. This is item number 2. This text is here to 
      fill up space.</P>
      <P>This is item number 2. This text is here to fill up space. This is item 
      number 2. This text is here to fill up space. This is item number 2. This 
      text is here to fill up space. This is item number 2. This text is here to 
      fill up space.</P>
      <P>This is item number 2. This text is here to fill up space. This is item 
      number 2. This text is here to fill up space. This is item number 2. This 
      text is here to fill up space. This is item number 2. This text is here to 
      fill up space.</P>
      <P>This is item number 2. This text is here to fill up space. This is item 
      number 2. This text is here to fill up space. This is item number 2. This 
      text is here to fill up space. This is item number 2. This text is here to 
      fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout3Window>
<DIV id=pullout3Content>
<DIV align=center><STRONG>第四页</STRONG></DIV>
<TABLE width=275 border=0>
  <TBODY>
  <TR>
    <TD>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout4Window>
<DIV id=pullout4Content>
<DIV align=center><STRONG>第五页</STRONG></DIV>
<TABLE width=275 border=0>
  <TBODY>
  <TR>
    <TD>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up space.</P>
      <P>This is item number 0. This text is here to fill up space. This is item 
      number 0. This text is here to fill up space. This is item number 0. This 
      text is here to fill up space. This is item number 0. This text is here to 
      fill up 
space.</P></TD></TR></TBODY></TABLE></DIV></DIV></DIV></DIV>

</body>

</html>

三组文字间隙滚动代码

中文字段的几种有趣排列方式

超强论坛灌水工具---写大字板

闪动的文字

如何在一段文字里点一下就可以在里面插入一段文字

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：