Java堂  


« 使用java.util.zip对字符串进行压缩和解压缩
收集到的用js和css实现的菜单 »

9月 3, 2006

真的是不错的js控制区域方向的代码

归档在: Web&Server — Jet @ 12:06 上午
Tags:
原文出处: http://www.javatang.com/archives/2006/09/03/064362.html
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

无意中找到一个控制区域方向的代码，可以暂停、播放、向上下左右四个方向运行等很多效果，功能非常的强大，控制也非常的方便，于是记录下来。需要说明几点：
1. 代码中

  1. window.onload = new Function("scroll(document.all['testDiv'], 325)")

是初始化脚本用的，第一个参数传递对象，第二个参数传递宽度。另外上面的代码也可以使用下面的代码替换

  1. window.onload = function(){scroll(document.all['testDiv'], 325);}

2. 保存区域的代码

  1. <div id="testDiv" style="border: buttonface 2 solid">...</div>

中间 style里面的border属性不能去掉，因为代码中会使用到的。如果不需要边框可是设置border为0；

3. 可以设置不用的事件，举例如下：

  1. // 鼠标移动到上面
  2. testDiv.onmouseover=function(){testDiv.state='stop';}
  3. // 鼠标移开
  4. testDiv.onmouseout=function(){testDiv.state='scroll';}
  5. // 鼠标单击
  6. testDiv.onclick=function(){testDiv.direction='up'; testDiv.state='scroll';}

4. 代码不适用于FireFox或NetScape浏览器。

代码如下：

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

参考资料：
一个可以上下左右滚动的经典代码
http://www.hanhao.cn/blog/article.asp?id=486

没有评论 »

还没有评论。

发表您的评论