可以上下左右滚动的经典代码

一个可以上下左右滚动的经典代码。

  1 < HTML >  
  2 < HEAD >  
  3 < TITLE > 滚动效果 </ TITLE >  
  4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >  
  5 </ HEAD >  
  6 < BODY  STYLE ="overflow: hidden; border: 0"  topmargin =0  leftmargin =0 >  
  7 < table >  
  8 < tr >< td  style ="padding: 5" >  
  9 < div  id ="testDiv"  style ="border: buttonface 2 solid" >  
 10 < img  src ="http://bbs.blueidea.com/images/blue/logo.gif" >  
 11 </ div >  
 12 < script  language ="JScript" >  
 13function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed) 
 14{ 
 15  var scrollDiv    = obj 
 16  var scrollContent  = document.createElement("span") 
 17  scrollContent.style.position = "absolute" 
 18  scrollDiv.applyElement(scrollContent, "inside") 
 19  var displayWidth  = (oWidth != "auto" && oWidth ) ? oWidth : scrollContent.offsetWidth + parseInt(scrollDiv.currentStyle.borderRightWidth) 
 20  var displayHeight  = (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth) 
 21  var contentWidth  = scrollContent.offsetWidth 
 22  var contentHeight  = scrollContent.offsetHeight 
 23  var scrollXItems  = Math.ceil(displayWidth / contentWidth) + 1 
 24  var scrollYItems  = Math.ceil(displayHeight / contentHeight) + 1 
 25  scrollDiv.style.width   = displayWidth 
 26  scrollDiv.style.height   = displayHeight 
 27  scrollDiv.style.overflow = "hidden" 
 28  scrollDiv.setAttribute("state", "stop") 
 29  scrollDiv.setAttribute("drag", drag ? drag : "horizontal") 
 30  scrollDiv.setAttribute("direction", direction ? direction : "left") 
 31  scrollDiv.setAttribute("zoom", zoom ? zoom : 1) 
 32  scrollContent.style.zoom = scrollDiv.zoom 
 33  var scroll_script =  "var scrollDiv = " + scrollDiv.uniqueID                    +"\n"+ 
 34        "var scrollObj = " + scrollContent.uniqueID                  +"\n"+ 
 35        "var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"  +"\n"+ 
 36        "var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"  +"\n"+ 
 37        "var scrollx = scrollObj.runtimeStyle.pixelLeft"                +"\n"+ 
 38        "var scrolly = scrollObj.runtimeStyle.pixelTop"                  +"\n"+ 
 39        "switch (scrollDiv.state.toLowerCase())"                +"\n"+ 
 40        "{"                          +"\n"+ 
 41          "case ('scroll')  :"                  +"\n"+ 
 42            "switch (scrollDiv.direction)"                +"\n"+ 
 43            "{"                      +"\n"+ 
 44              "case ('left')    :"              +"\n"+ 
 45                "scrollx = (--scrollx) % contentWidth"          +"\n"+ 
 46                "break"                  +"\n"+ 
 47              "case ('right')  :"                +"\n"+ 
 48                "scrollx = -contentWidth + (++scrollx) % contentWidth"      +"\n"+ 
 49                "break"                  +"\n"+ 
 50              "case ('up')  :"                +"\n"+ 
 51                "scrolly = (--scrolly) % contentHeight"          +"\n"+ 
 52                "break"                  +"\n"+ 
 53              "case ('down')  :"                +"\n"+ 
 54                "scrolly = -contentHeight + (++scrolly) % contentHeight"    +"\n"+ 
 55                "break"                  +"\n"+ 
 56              "case ('left_up')  :"              +"\n"+ 
 57                "scrollx = (--scrollx) % contentWidth"          +"\n"+ 
 58                "scrolly = (--scrolly) % contentHeight"          +"\n"+ 
 59                "break"                  +"\n"+ 
 60              "case ('left_down')  :"              +"\n"+ 
 61                "scrollx = (--scrollx) % contentWidth"          +"\n"+ 
 62                "scrolly = -contentHeight + (++scrolly) % contentHeight"    +"\n"+ 
 63                "break"                  +"\n"+ 
 64              "case ('right_up')  :"              +"\n"+ 
 65                "scrollx = -contentWidth + (++scrollx) % contentWidth"      +"\n"+ 
 66                "scrolly = (--scrolly) % contentHeight"          +"\n"+ 
 67                "break"                  +"\n"+ 
 68              "case ('right_down')  :"              +"\n"+ 
 69                "scrollx = -contentWidth + (++scrollx) % contentWidth"      +"\n"+ 
 70                "scrolly = -contentHeight + (++scrolly) % contentHeight"    +"\n"+ 
 71                "break"                  +"\n"+ 
 72              "default    :"              +"\n"+ 
 73                "return"                +"\n"+ 
 74            "}"                      +"\n"+ 
 75            "scrollObj.runtimeStyle.left = scrollx"              +"\n"+ 
 76            "scrollObj.runtimeStyle.top = scrolly"              +"\n"+ 
 77            "break"                      +"\n"+ 
 78          "case ('stop')  :"                    +"\n"+ 
 79          "case ('drag')  :"                    +"\n"+ 
 80          "default  :"                    +"\n"+ 
 81            "return"                    +"\n"+ 
 82        "}" 
 83  var contentNode = document.createElement("span") 
 84  contentNode.runtimeStyle.position = "absolute" 
 85  contentNode.runtimeStyle.width = contentWidth 
 86  scrollContent.applyElement(contentNode, "inside") 
 87  for (var i=0; i <= scrollXItems; i++) 
 88  { 
 89    for (var j=0; j <= scrollYItems ; j++) 
 90    { 
 91      if (i+j == 0)  continue 
 92      var tempNode = contentNode.cloneNode(true) 
 93      var contentLeft, contentTop 
 94      scrollContent.insertBefore(tempNode) 
 95      contentLeft = contentWidth * i 
 96      contentTop = contentHeight * j 
 97      tempNode.runtimeStyle.left = contentLeft 
 98      tempNode.runtimeStyle.top = contentTop 
 99    } 
100  } 
101  scrollDiv.onpropertychange = function() 
102  { 
103    var propertyName = window.event.propertyName 
104    var propertyValue = eval("this." + propertyName)  
105    switch(propertyName) 
106    { 
107      case "zoom"    : 
108        var scrollObj = this.children[0] 
109        scrollObj.runtimeStyle.zoom = propertyValue 
110        var content_width = scrollObj.children[0].offsetWidth * propertyValue 
111        var content_height = scrollObj.children[0].offsetHeight * propertyValue 
112        scrollObj.runtimeStyle.left = -content_width + (scrollObj.runtimeStyle.pixelLeft % content_width) 
113        scrollObj.runtimeStyle.top = -content_height + (scrollObj.runtimeStyle.pixelTop % content_height) 
114        break 
115    } 
116  } 
117  scrollDiv.onlosecapture = function() 
118  { 
119    this.state = this.tempState ? this.tempState : this.state 
120    this.runtimeStyle.cursor = "" 
121    this.removeAttribute("tempState") 
122    this.removeAttribute("start_x") 
123    this.removeAttribute("start_y") 
124    this.removeAttribute("default_left") 
125    this.removeAttribute("default_top") 
126  } 
127  scrollDiv.onmousedown = function() 
128  { 
129    if (this.state != "drag")  this.setAttribute("tempState", this.state) 
130    this.state = "drag" 
131    this.runtimeStyle.cursor = "default" 
132    this.setAttribute("start_x", event.clientX) 
133    this.setAttribute("start_y", event.clientY) 
134    this.setAttribute("default_left", this.children[0].style.pixelLeft) 
135    this.setAttribute("default_top", this.children[0].style.pixelTop) 
136    this.setCapture() 
137  } 
138scrollDiv.onmousemove = function() 
139  { 
140    if (this.state != "drag")  return 
141    var scrollx = scrolly = 0 
142    var zoomValue = this.children[0].style.zoom ? this.children[0].style.zoom : 1 
143    var content_width = this.children[0].children[0].offsetWidth * zoomValue 
144    var content_Height = this.children[0].children[0].offsetHeight * zoomValue 
145    if (this.drag == "horizontal" || this.drag == "both") 
146    { 
147      scrollx = this.default_left + event.clientX - this.start_x 
148      scrollx = -content_width + scrollx % content_width 
149      this.children[0].runtimeStyle.left = scrollx 
150    } 
151    if (this.drag == "vertical" || this.drag == "both") 
152    { 
153      scrolly = this.default_top + event.clientY - this.start_y 
154      scrolly = -content_Height + scrolly % content_Height 
155      this.children[0].runtimeStyle.top = scrolly 
156    } 
157  } 
158  scrollDiv.onmouseup = function() 
159  { 
160    this.releaseCapture() 
161  } 
162  
163  scrollDiv.state = "scroll" 
164  setInterval(scroll_script, speed ? speed : 20) 
165} 
166 </ script >  
167 < script  language ="JScript" >  
168window.onload = new Function("scroll(document.all['testDiv'], 325)") 
169 </ script >  
170 < br >  
171 < button  onclick ="testDiv.direction='up'; testDiv.state='scroll'" >< span  style ="font-family: Webdings" > 5 </ span > 向上 </ button >  
172 < button  onclick ="testDiv.direction='left'; testDiv.state='scroll'" >< span  style ="font-family: Webdings" > 3 </ span > 向左 </ button >  
173 < button  onclick ="testDiv.state='stop'" >< span  style ="font-family: Webdings" > ; </ span > 停止 </ button >  
174 < button  onclick ="testDiv.state='scroll'" >< span  style ="font-family: Webdings" > 8 </ span > 播放 </ button >  
175 < button  onclick ="testDiv.direction='right'; testDiv.state='scroll'" >< span  style ="font-family: Webdings" > 4 </ span > 向右 </ button >  
176 < button  onclick ="testDiv.direction='down'; testDiv.state='scroll'" >< span  style ="font-family: Webdings" > 6 </ span > 向下 </ button >  
177 < br >  
178 缩放： 
179 < select  onchange ="testDiv.zoom = this.options[selectedIndex].value" >  
180    < option  value =1 > 100% </ option >  
181    < option  value =2 > 200% </ option >  
182    < option  value =3 > 300% </ option >  
183 </ select > 　　　　　 
184 托动范围： 
185 < select  onchange ="testDiv.drag = this.options[selectedIndex].value" >  
186    < option  value ="both" > 随意 </ option >  
187    < option  value ="horizontal"  selected > 横向 </ option >  
188    < option  value ="vertical" > 纵向 </ option >  
189 </ select >  
190 </ td ></ tr >  
191 </ table >  
192 </ BODY >  
193 </ HTML >
194