50、字幕滚动效果

50、字幕滚动效果

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效---字幕滚动效果---非常酷哦(七)</title>

</head>

 

<body onload=init()>

 

<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>

 

Write a comment

Comments: 0