`
mqqqvpppm
  • 浏览: 64970 次
  • 性别: Icon_minigender_1
  • 来自: Kun Ming
社区版块
存档分类
最新评论

JS implement scroll

JavaScriptXHTMLHTML 
阅读更多
html代码
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. < head >   
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=iso-8859-1"   />   
  5. < title > Untitled Document </ title >   
  6. </ head >   
  7.   
  8. < body >   
  9. < img   onmouseover = "LeftOver()"   onmouseout = "LeftOut()"   onmousedown = "LeftDown()"    onmouseup = "LeftUp()"   src = "right.gif"   width = "13"   height = "13"   /> left         
  10. < img   onmouseover = "RightOver()"   onmouseout = "RightOut()"   onmousedown = "RightDown()"    onmouseup = "RightUp()"   src = "left.gif"   width = "13"   height = "13"   /> right  
  11. < DIV   id = "scrollBox"   style = "Z-INDEX: 100; OVERFLOW: hidden; WIDTH: 490px; POSITION: static; HEIGHT: 170px" >   
  12.     < TABLE   cellSpacing = 0   cellPadding = 0   width = "100%"   border = 0 > < TBODY >   
  13.                                   
  14.         < TR >           
  15.         < TD   id = "scrollObject" >                                         
  16.                                         < img   id = "pfxx"   src = "DSC08410.JPG"   width = "1280"   height = "960"   />                                         
  17.                 </ TD > <!--  logic for material 1 end -->                                    
  18.   
  19.         < TD   id = "scrollObjectMirror" > </ TD >          
  20.           
  21.         </ TR >   
  22.                                   
  23.                                   
  24.         </ TBODY > </ TABLE >   
  25. </ DIV >   
  26. < script   src = "scrollpic.js"   language = "javascript" > </ script >   
  27.   
  28.   
  29. </ body >   
  30. </ html >   


scroll.js 代码
 
  1. var  speed3=10 //??????????   
  2. scrollObjectMirror.innerHTML=scrollObject.innerHTML  
  3. function  MarqueeLeft(obj,obj1,obj2,step){  
  4.     if (obj2.offsetWidth-obj.scrollLeft<=0) {  
  5.         obj.scrollLeft-=obj1.offsetWidth  
  6.     }  
  7.     else {  
  8.         obj.scrollLeft+=step;  
  9.     }  
  10. }  
  11.   
  12. function  MarqueeRight(obj,obj1,obj2,step){  
  13.     if (obj.scrollLeft<=0) {  
  14.         obj.scrollLeft +=obj1.offsetWidth  
  15.     }  
  16.     else {  
  17.         obj.scrollLeft-=step;  
  18.     }  
  19. }  
  20.   
  21.   
  22.   
  23. var  MyMar1;  
  24.   
  25.   
  26. function  LeftOut(){clearInterval(MyMar1)}  
  27. function  LeftOver(){clearInterval(MyMar1);MyMar1=setInterval( "MarqueeLeft(scrollBox, scrollObject, scrollObjectMirror, 1)" ,speed3)}  
  28. function  RightOut(){clearInterval(MyMar1)}  
  29. function  RightOver(){clearInterval(MyMar1);MyMar1=setInterval( "MarqueeRight(scrollBox, scrollObject, scrollObjectMirror, 1)" ,speed3)}  
  30. //onmouseout="LeftOut()" onmousedown="LeftDown()"  onmouseup="LeftUp()"   
  31. function  LeftUp(){clearInterval(MyMar1);MyMar1=setInterval( "MarqueeLeft(scrollBox, scrollObject, scrollObjectMirror, 1)" ,speed3)}  
  32. function  LeftDown(){clearInterval(MyMar1);MyMar1=setInterval( "MarqueeLeft(scrollBox, scrollObject, scrollObjectMirror, 5)" ,speed3)}  
  33. function  RightUp(){clearInterval(MyMar1);MyMar1=setInterval( "MarqueeRight(scrollBox, scrollObject, scrollObjectMirror, 1)" ,speed3)}  
  34. function  RightDown(){clearInterval(MyMar1);MyMar1=setInterval( "MarqueeRight(scrollBox, scrollObject, scrollObjectMirror, 5)" ,speed3)}  


分享到：
| 什么是XFire
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics