·返回首页
·联系我们
·在线留言
搜索内容 : 搜索类别 :
 
   字幕滚动效果---非常酷哦(七)

以下是代码片段:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---字幕滚动效果---非常酷哦(七)</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)
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)
 }
 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)
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)
 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>

                             检测代码效果 请进


 

          

 版权所有:网站通建站专家网  请勿翻版转载

 地址:中国·江西·宜春市官山路75号

 在线咨询:      

 咨询电话:15507950000  投诉建议:13177777713   邮箱:wangzhant@qq.com

 《中华人民共和国信息产业部ICP网站备案》  IPC备案号:赣ICP备08003251号

网站管理