博客园  :: 首页  :: 管理

推荐:平行滚动的广告条

Posted on 2006-02-05 10:16  Paker Liu  阅读(472)  评论(0编辑  收藏  举报
  1<script language="JavaScript">
  2imgArr=new Array()
  3imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/l/lisababy6617.gif border=0></a>"
  4imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/t/testool4434.gif border=0></a>"
  5imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/s/sxyuda6549.gif border=0></a>"
  6imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/q/qeji4041.gif border=0></a>"
  7imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/i/ieasytraining3984.gif border=0></a>"
  8imgArr[5]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/t/trainings1442.gif border=0></a>"
  9imgArr[6]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/r/renhebj002indexasp2486.gif border=0></a>"
 10imgArr[7]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/e/efeedlink6085.gif border=0></a>"
 11imgArr[8]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/k/kaixingou5811.gif border=0></a>"
 12imgArr[9]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/h/9happyindex8htm5912.gif border=0></a>"
 13imgArr[10]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/c/chinaroom6034.gif border=0></a>"
 14var moveStep=4        //步长,单位:pixel
 15var moveRelax=100    //移动时间间隔,单位:ms
 16
 17ns4=(document.layers)?true:false
 18
 19var displayImgAmount=4    //视区窗口可显示个数
 20var divWidth=125    //每块图片占位宽
 21var divHeight=60    //每块图片占位高
 22
 23var startDnum=0
 24var nextDnum=startDnum+displayImgAmount
 25var timeID
 26var outHover=false
 27
 28var startDivClipLeft
 29var nextDivClipRight
 30
 31function initDivPlace(){
 32    if (ns4){
 33        for (i=0;i<displayImgAmount;i++){
 34            eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
 35        }

 36        for (i=displayImgAmount;i<imgArr.length;i++){
 37            eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
 38        }

 39    }
else{
 40        for (i=0;i<displayImgAmount;i++){
 41            eval("document.all.divAds"+i+".style.left="+divWidth*i)
 42        }

 43        for (i=displayImgAmount;i<imgArr.length;i++){
 44            eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
 45        }

 46    }

 47}

 48
 49function mvStart(){
 50    timeID=setTimeout(moveLeftDiv,moveRelax)
 51}

 52
 53function mvStop(){
 54    clearTimeout(timeID)
 55}

 56
 57function moveLeftDiv(){
 58    if (ns4){
 59        for (i=0;i<=displayImgAmount;i++){
 60            eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
 61        }

 62
 63        startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
 64        nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))
 65
 66        if (startDivClipLeft+moveStep>divWidth){
 67            eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)
 68            
 69            eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
 70            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
 71            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")
 72            
 73            
 74            startDnum=(++startDnum)%imgArr.length
 75            nextDnum=(startDnum+displayImgAmount)%imgArr.length
 76            
 77            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
 78            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
 79        }
else{
 80            eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
 81            startDivClipLeft+=moveStep
 82            nextDivClipRight+=moveStep
 83        }

 84        eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
 85        eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
 86    }
else{
 87        for (i=0;i<=displayImgAmount;i++){
 88            eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
 89        }

 90    
 91        startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
 92        nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))
 93    
 94        if (startDivClipLeft+moveStep>divWidth){
 95            eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")
 96            
 97            eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
 98            eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)
 99            
100            startDnum=(++startDnum)%imgArr.length
101            nextDnum=(startDnum+displayImgAmount)%imgArr.length
102            
103            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
104            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
105        }
else{
106            startDivClipLeft+=moveStep
107            nextDivClipRight+=moveStep
108        }

109        eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
110        eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
111    }

112
113    if (outHover){
114        mvStop()
115    }
else{
116        mvStart()
117    }

118    
119    
120}

121
122function writeDivs(){
123    if (ns4){
124        document.write("<ilayer name=divOuter width=750 height="+divHeight+">")
125        
126        for (i=0;i<imgArr.length;i++){
127            document.write("<layer name=divAds"+i+">")
128            document.write(imgArr[i]+" ")
129            document.write("</layer>")
130        }

131        document.write("</ilayer>")
132        document.close()
133        for (i=displayImgAmount;i<imgArr.length;i++){
134            eval("document.divOuter.document.divAds"+i+".clip.right=0")
135        }

136    }
else{
137        document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")
138        
139        for (i=0;i<imgArr.length;i++){
140            document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
141            document.write(imgArr[i]+" ")
142            document.write("</div>")
143        }

144        document.write("</div>")
145        for (i=displayImgAmount;i<imgArr.length;i++){
146            eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
147        }

148    }

149}

150</script>
151<BODY onload=javascript:mvStart()>
152<SCRIPT language=JavaScript>writeDivs();initDivPlace();</SCRIPT>