62、图片的任意方向移动

62、图片的任意方向移动

脚本说明:

把如下代码加入<body>区域中

<table>

<tr><td style="padding: 5">

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

<img src="2201.jpg">

</div>

<script language="JScript">

function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed)

{

       var scrollDiv          = obj

       var scrollContent    = document.createElement("span")

       scrollContent.style.position = "absolute"

       scrollDiv.applyElement(scrollContent, "inside")

       var displayWidth    = (oWidth  != "auto" && oWidth ) ? oWidth  : scrollContent.offsetWidth  + parseInt(scrollDiv.currentStyle.borderRightWidth)

       var displayHeight   = (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth)

       var contentWidth    = scrollContent.offsetWidth

       var contentHeight   = scrollContent.offsetHeight

       var scrollXItems     = Math.ceil(displayWidth  / contentWidth)  + 1

       var scrollYItems     = Math.ceil(displayHeight / contentHeight) + 1

 

       scrollDiv.style.width      = displayWidth

       scrollDiv.style.height     = displayHeight

       scrollDiv.style.overflow = "hidden"

       scrollDiv.setAttribute("state", "stop")

       scrollDiv.setAttribute("drag", drag ? drag : "horizontal")

       scrollDiv.setAttribute("direction", direction ? direction : "left")

       scrollDiv.setAttribute("zoom", zoom ? zoom : 1)

       scrollContent.style.zoom = scrollDiv.zoom

      

       var scroll_script =  "var scrollDiv = " + scrollDiv.uniqueID                                                                      +"\n"+

                            "var scrollObj = " + scrollContent.uniqueID                                                         +"\n"+

                            "var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"       +"\n"+

                            "var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"       +"\n"+

                            "var scrollx = scrollObj.runtimeStyle.pixelLeft"                                                   +"\n"+

                            "var scrolly = scrollObj.runtimeStyle.pixelTop"                                                           +"\n"+

 

                            "switch (scrollDiv.state.toLowerCase())"                                                       +"\n"+

                            "{"                                                                                      +"\n"+

                                   "case ('scroll')  :"                                                             +"\n"+

                                          "switch (scrollDiv.direction)"                                                        +"\n"+

                                          "{"                                                                        +"\n"+

                                                 "case ('left')            :"                                               +"\n"+

                                                        "scrollx = (--scrollx) % contentWidth"                             +"\n"+

                                                        "break"                                                           +"\n"+

                                                 "case ('right')   :"                                                      +"\n"+

                                                        "scrollx = -contentWidth + (++scrollx) % contentWidth"                  +"\n"+

                                                        "break"                                                           +"\n"+

                                                 "case ('up')      :"                                                      +"\n"+

                                                        "scrolly = (--scrolly) % contentHeight"                                   +"\n"+

                                                        "break"                                                           +"\n"+

                                                 "case ('down')  :"                                                      +"\n"+

                                                        "scrolly = -contentHeight + (++scrolly) % contentHeight"         +"\n"+

                                                        "break"                                                           +"\n"+

                                                 "case ('left_up')      :"                                               +"\n"+

                                                        "scrollx = (--scrollx) % contentWidth"                             +"\n"+

                                                        "scrolly = (--scrolly) % contentHeight"                                   +"\n"+

                                                        "break"                                                           +"\n"+

                                                 "case ('left_down')  :"                                               +"\n"+

                                                        "scrollx = (--scrollx) % contentWidth"                             +"\n"+

                                                        "scrolly = -contentHeight + (++scrolly) % contentHeight"         +"\n"+

                                                        "break"                                                           +"\n"+

                                                 "case ('right_up')    :"                                               +"\n"+

                                                        "scrollx = -contentWidth + (++scrollx) % contentWidth"                  +"\n"+

                                                        "scrolly = (--scrolly) % contentHeight"                                   +"\n"+

                                                        "break"                                                           +"\n"+

                                                 "case ('right_down')       :"                                               +"\n"+

                                                        "scrollx = -contentWidth + (++scrollx) % contentWidth"                  +"\n"+

                                                        "scrolly = -contentHeight + (++scrolly) % contentHeight"         +"\n"+

                                                        "break"                                                           +"\n"+

                                                 "default          :"                                               +"\n"+

                                                        "return"                                                    +"\n"+

                                          "}"                                                                        +"\n"+

                                          "scrollObj.runtimeStyle.left = scrollx"                                            +"\n"+

                                          "scrollObj.runtimeStyle.top = scrolly"                                            +"\n"+

                                          "break"                                                                         +"\n"+

      

                                   "case ('stop')    :"                                                                    +"\n"+

                                   "case ('drag')   :"                                                                    +"\n"+

                                   "default   :"                                                                    +"\n"+

                                          "return"                                                                  +"\n"+

                            "}"

      

       var contentNode = document.createElement("span")

       contentNode.runtimeStyle.position = "absolute"

       contentNode.runtimeStyle.width = contentWidth

       scrollContent.applyElement(contentNode, "inside")

       for (var i=0; i <= scrollXItems; i++)

       {

              for (var j=0; j <= scrollYItems ; j++)

              {

                     if (i+j == 0)    continue

                     var tempNode = contentNode.cloneNode(true)

                     var contentLeft, contentTop

                     scrollContent.insertBefore(tempNode)

                     contentLeft = contentWidth * i

                     contentTop = contentHeight * j

                     tempNode.runtimeStyle.left = contentLeft

                     tempNode.runtimeStyle.top  = contentTop

              }

       }

 

       scrollDiv.onpropertychange = function()

       {

              var propertyName = window.event.propertyName

              var propertyValue = eval("this." + propertyName)

             

              switch(propertyName)

              {

                     case "zoom"           :

                            var scrollObj = this.children[0]

                            scrollObj.runtimeStyle.zoom = propertyValue

                            var content_width  = scrollObj.children[0].offsetWidth  * propertyValue

                            var content_height = scrollObj.children[0].offsetHeight * propertyValue

                            scrollObj.runtimeStyle.left = -content_width  + (scrollObj.runtimeStyle.pixelLeft % content_width)

                            scrollObj.runtimeStyle.top  = -content_height + (scrollObj.runtimeStyle.pixelTop  % content_height)

                            break

              }

       }

      

       scrollDiv.onlosecapture = function()

       {

              this.state = this.tempState ? this.tempState : this.state

              this.runtimeStyle.cursor = ""

              this.removeAttribute("tempState")

              this.removeAttribute("start_x")

              this.removeAttribute("start_y")

              this.removeAttribute("default_left")

              this.removeAttribute("default_top")

       }

      

       scrollDiv.onmousedown = function()

       {

              if (this.state != "drag")   this.setAttribute("tempState", this.state)

              this.state = "drag"

              this.runtimeStyle.cursor = "default"

              this.setAttribute("start_x", event.clientX)

              this.setAttribute("start_y", event.clientY)

              this.setAttribute("default_left", this.children[0].style.pixelLeft)

              this.setAttribute("default_top", this.children[0].style.pixelTop)

              this.setCapture()

       }

      

       scrollDiv.onmousemove = function()

       {

              if (this.state != "drag")   return

              var scrollx = scrolly = 0

              var zoomValue = this.children[0].style.zoom ? this.children[0].style.zoom : 1

              var content_width = this.children[0].children[0].offsetWidth * zoomValue

              var content_Height = this.children[0].children[0].offsetHeight * zoomValue

              if (this.drag == "horizontal" || this.drag == "both")

              {

                     scrollx = this.default_left + event.clientX - this.start_x

                     scrollx = -content_width + scrollx % content_width

                     this.children[0].runtimeStyle.left = scrollx

              }

              if (this.drag == "vertical" || this.drag == "both")

              {

                     scrolly = this.default_top + event.clientY - this.start_y

                     scrolly = -content_Height + scrolly % content_Height

                     this.children[0].runtimeStyle.top = scrolly

              }

       }

      

       scrollDiv.onmouseup = function()

       {

              this.releaseCapture()

       }

      

       scrollDiv.state = "scroll"

       setInterval(scroll_script, speed ? speed : 20)

}

</script>

<script language="JScript">

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

</script>

<br>

<button onclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button>

<button onclick="testDiv.direction='left'; testDiv.state='scroll'"><span style="font-family: Webdings">3</span>向左</button>

<button onclick="testDiv.state='stop'"><span style="font-family: Webdings">;</span>停止</button>

<button onclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</span>播放</button>

<button onclick="testDiv.direction='right'; testDiv.state='scroll'"><span style="font-family: Webdings">4</span>向右</button>

<button onclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button>

<br>

缩放:

<select onchange="testDiv.zoom = this.options[selectedIndex].value">

       <option value=1>100%</option>

       <option value=2>200%</option>

       <option value=3>300%</option>

</select>     

托动范围:

<select onchange="testDiv.drag = this.options[selectedIndex].value">

       <option value="both">随意</option>

       <option value="horizontal" selected>横向</option>

       <option value="vertical">纵向</option>

</select>

</td></tr>

</table>

 

Write a comment

Comments: 0