 
                    
                
         
    
    
    
   
   
   
   
   
	
    
        
        
 <div id="testDiv" style="border: buttonface 2 solid">
<div id="testDiv" style="border: buttonface 2 solid"> 
 <img src=http://www.51js.com/images/51js/51js.gif>这可以是任意的内容
<img src=http://www.51js.com/images/51js/51js.gif>这可以是任意的内容 
 </div>
</div> 

 <script language="JScript">
<script language="JScript"> 
 
 function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed)
function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed) 


 {
{ 
 var scrollDiv = obj
var scrollDiv = obj 
 var scrollContent = document.createElement("span")
var scrollContent = document.createElement("span") 
 scrollContent.style.position = "absolute"
scrollContent.style.position = "absolute" 
 scrollDiv.applyElement(scrollContent, "inside")
scrollDiv.applyElement(scrollContent, "inside") 
 var displayWidth = (oWidth != "auto" && oWidth ) ? oWidth : scrollContent.offsetWidth + parseInt(scrollDiv.currentStyle.borderRightWidth)
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 displayHeight = (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth) 
 var contentWidth = scrollContent.offsetWidth
var contentWidth = scrollContent.offsetWidth 
 var contentHeight = scrollContent.offsetHeight
var contentHeight = scrollContent.offsetHeight 
 var scrollXItems = Math.ceil(displayWidth / contentWidth) + 1
var scrollXItems = Math.ceil(displayWidth / contentWidth) + 1 
 var scrollYItems = Math.ceil(displayHeight / contentHeight) + 1
var scrollYItems = Math.ceil(displayHeight / contentHeight) + 1 

 scrollDiv.style.width = displayWidth
scrollDiv.style.width = displayWidth 
 scrollDiv.style.height = displayHeight
scrollDiv.style.height = displayHeight 
 scrollDiv.style.overflow = "hidden"
scrollDiv.style.overflow = "hidden" 
 scrollDiv.setAttribute("state", "stop")
scrollDiv.setAttribute("state", "stop") 
 scrollDiv.setAttribute("drag", drag ? drag : "horizontal")
scrollDiv.setAttribute("drag", drag ? drag : "horizontal") 
 scrollDiv.setAttribute("direction", direction ? direction : "up")
scrollDiv.setAttribute("direction", direction ? direction : "up") 
 scrollDiv.setAttribute("zoom", zoom ? zoom : 1)
scrollDiv.setAttribute("zoom", zoom ? zoom : 1) 
 scrollContent.style.zoom = scrollDiv.zoom
scrollContent.style.zoom = scrollDiv.zoom 

 var scroll_script = "var scrollDiv = " + scrollDiv.uniqueID +"\n"+
var scroll_script = "var scrollDiv = " + scrollDiv.uniqueID +"\n"+ 
 "var scrollObj = " + scrollContent.uniqueID +"\n"+
"var scrollObj = " + scrollContent.uniqueID +"\n"+ 
 "var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)" +"\n"+
"var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)" +"\n"+ 
 "var contentHeight = " + contentHeight + " * (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 scrollx = scrollObj.runtimeStyle.pixelLeft" +"\n"+ 
 "var scrolly = scrollObj.runtimeStyle.pixelTop" +"\n"+
"var scrolly = scrollObj.runtimeStyle.pixelTop" +"\n"+ 

 "switch (scrollDiv.state.toLowerCase())" +"\n"+
"switch (scrollDiv.state.toLowerCase())" +"\n"+ 
 "{" +"\n"+
"{" +"\n"+ 
 "case ('scroll') :" +"\n"+
"case ('scroll') :" +"\n"+ 
 "switch (scrollDiv.direction)" +"\n"+
"switch (scrollDiv.direction)" +"\n"+ 
 "{" +"\n"+
"{" +"\n"+ 
 "case ('left') :" +"\n"+
"case ('left') :" +"\n"+ 
 "scrollx = (--scrollx) % contentWidth" +"\n"+
"scrollx = (--scrollx) % contentWidth" +"\n"+ 
 "break" +"\n"+
"break" +"\n"+ 
 "case ('right') :" +"\n"+
"case ('right') :" +"\n"+ 
 "scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+
"scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+ 
 "break" +"\n"+
"break" +"\n"+ 
 "case ('up') :" +"\n"+
"case ('up') :" +"\n"+ 
 "scrolly = (--scrolly) % contentHeight" +"\n"+
"scrolly = (--scrolly) % contentHeight" +"\n"+ 
 "break" +"\n"+
"break" +"\n"+ 
 "case ('down') :" +"\n"+
"case ('down') :" +"\n"+ 
 "scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+
"scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+ 
 "break" +"\n"+
"break" +"\n"+ 
 "case ('left_up') :" +"\n"+
"case ('left_up') :" +"\n"+ 
 "scrollx = (--scrollx) % contentWidth" +"\n"+
"scrollx = (--scrollx) % contentWidth" +"\n"+ 
 "scrolly = (--scrolly) % contentHeight" +"\n"+
"scrolly = (--scrolly) % contentHeight" +"\n"+ 
 "break" +"\n"+
"break" +"\n"+ 
 "case ('left_down') :" +"\n"+
"case ('left_down') :" +"\n"+ 
 "scrollx = (--scrollx) % contentWidth" +"\n"+
"scrollx = (--scrollx) % contentWidth" +"\n"+ 
 "scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+
"scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+ 
 "break" +"\n"+
"break" +"\n"+ 
 "case ('right_up') :" +"\n"+
"case ('right_up') :" +"\n"+ 
 "scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+
"scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+ 
 "scrolly = (--scrolly) % contentHeight" +"\n"+
"scrolly = (--scrolly) % contentHeight" +"\n"+ 
 "break" +"\n"+
"break" +"\n"+ 
 "case ('right_down') :" +"\n"+
"case ('right_down') :" +"\n"+ 
 "scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+
"scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+ 
 "scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+
"scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+ 
 "break" +"\n"+
"break" +"\n"+ 
 "default :" +"\n"+
"default :" +"\n"+ 
 "return" +"\n"+
"return" +"\n"+ 
 "}" +"\n"+
"}" +"\n"+ 
 "scrollObj.runtimeStyle.left = scrollx" +"\n"+
"scrollObj.runtimeStyle.left = scrollx" +"\n"+ 
 "scrollObj.runtimeStyle.top = scrolly" +"\n"+
"scrollObj.runtimeStyle.top = scrolly" +"\n"+ 
 "break" +"\n"+
"break" +"\n"+ 

 "case ('stop') :" +"\n"+
"case ('stop') :" +"\n"+ 
 "case ('drag') :" +"\n"+
"case ('drag') :" +"\n"+ 
 "default :" +"\n"+
"default :" +"\n"+ 
 "return" +"\n"+
"return" +"\n"+ 
 "}"
"}" 

 var contentNode = document.createElement("span")
var contentNode = document.createElement("span") 
 contentNode.runtimeStyle.position = "absolute"
contentNode.runtimeStyle.position = "absolute" 
 contentNode.runtimeStyle.width = contentWidth
contentNode.runtimeStyle.width = contentWidth 
 scrollContent.applyElement(contentNode, "inside")
scrollContent.applyElement(contentNode, "inside") 
 for (var i=0; i <= scrollXItems; i++)
for (var i=0; i <= scrollXItems; i++) 


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


 {
{ 
 if (i+j == 0) continue
if (i+j == 0) continue 
 var tempNode = contentNode.cloneNode(true)
var tempNode = contentNode.cloneNode(true) 
 var contentLeft, contentTop
var contentLeft, contentTop 
 scrollContent.insertBefore(tempNode)
scrollContent.insertBefore(tempNode) 
 contentLeft = contentWidth * i
contentLeft = contentWidth * i 
 contentTop = contentHeight * j
contentTop = contentHeight * j 
 tempNode.runtimeStyle.left = contentLeft
tempNode.runtimeStyle.left = contentLeft 
 tempNode.runtimeStyle.top = contentTop
tempNode.runtimeStyle.top = contentTop 
 }
} 
 }
} 

 scrollDiv.onpropertychange = function()
scrollDiv.onpropertychange = function() 


 {
{ 
 var propertyName = window.event.propertyName
var propertyName = window.event.propertyName 
 var propertyValue = eval("this." + propertyName)
var propertyValue = eval("this." + propertyName) 

 switch(propertyName)
switch(propertyName) 


 {
{ 
 case "zoom" :
case "zoom" : 
 var scrollObj = this.children[0]
var scrollObj = this.children[0] 
 scrollObj.runtimeStyle.zoom = propertyValue
scrollObj.runtimeStyle.zoom = propertyValue 
 var content_width = scrollObj.children[0].offsetWidth * propertyValue
var content_width = scrollObj.children[0].offsetWidth * propertyValue 
 var content_height = scrollObj.children[0].offsetHeight * propertyValue
var content_height = scrollObj.children[0].offsetHeight * propertyValue 
 scrollObj.runtimeStyle.left = -content_width + (scrollObj.runtimeStyle.pixelLeft % content_width)
scrollObj.runtimeStyle.left = -content_width + (scrollObj.runtimeStyle.pixelLeft % content_width) 
 scrollObj.runtimeStyle.top = -content_height + (scrollObj.runtimeStyle.pixelTop % content_height)
scrollObj.runtimeStyle.top = -content_height + (scrollObj.runtimeStyle.pixelTop % content_height) 
 break
break 
 }
} 
 }
} 

 scrollDiv.onlosecapture = function()
scrollDiv.onlosecapture = function() 


 {
{ 
 this.state = this.tempState ? this.tempState : this.state
this.state = this.tempState ? this.tempState : this.state 
 this.runtimeStyle.cursor = ""
this.runtimeStyle.cursor = "" 
 this.removeAttribute("tempState")
this.removeAttribute("tempState") 
 this.removeAttribute("start_x")
this.removeAttribute("start_x") 
 this.removeAttribute("start_y")
this.removeAttribute("start_y") 
 this.removeAttribute("default_left")
this.removeAttribute("default_left") 
 this.removeAttribute("default_top")
this.removeAttribute("default_top") 
 }
} 

 scrollDiv.onmousedown = function()
scrollDiv.onmousedown = function() 


 {
{ 
 if (this.state != "drag") this.setAttribute("tempState", this.state)
if (this.state != "drag") this.setAttribute("tempState", this.state) 
 this.state = "drag"
this.state = "drag" 
 this.runtimeStyle.cursor = "default"
this.runtimeStyle.cursor = "default" 
 this.setAttribute("start_x", event.clientX)
this.setAttribute("start_x", event.clientX) 
 this.setAttribute("start_y", event.clientY)
this.setAttribute("start_y", event.clientY) 
 this.setAttribute("default_left", this.children[0].style.pixelLeft)
this.setAttribute("default_left", this.children[0].style.pixelLeft) 
 this.setAttribute("default_top", this.children[0].style.pixelTop)
this.setAttribute("default_top", this.children[0].style.pixelTop) 
 this.setCapture()
this.setCapture() 
 }
} 

 scrollDiv.onmousemove = function()
scrollDiv.onmousemove = function() 


 {
{ 
 if (this.state != "drag") return
if (this.state != "drag") return 
 var scrollx = scrolly = 0
var scrollx = scrolly = 0 
 var zoomValue = this.children[0].style.zoom ? this.children[0].style.zoom : 1
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_width = this.children[0].children[0].offsetWidth * zoomValue 
 var content_Height = this.children[0].children[0].offsetHeight * zoomValue
var content_Height = this.children[0].children[0].offsetHeight * zoomValue 
 if (this.drag == "horizontal" || this.drag == "both")
if (this.drag == "horizontal" || this.drag == "both") 


 {
{ 
 scrollx = this.default_left + event.clientX - this.start_x
scrollx = this.default_left + event.clientX - this.start_x 
 scrollx = -content_width + scrollx % content_width
scrollx = -content_width + scrollx % content_width 
 this.children[0].runtimeStyle.left = scrollx
this.children[0].runtimeStyle.left = scrollx 
 }
} 
 if (this.drag == "vertical" || this.drag == "both")
if (this.drag == "vertical" || this.drag == "both") 


 {
{ 
 scrolly = this.default_top + event.clientY - this.start_y
scrolly = this.default_top + event.clientY - this.start_y 
 scrolly = -content_Height + scrolly % content_Height
scrolly = -content_Height + scrolly % content_Height 
 this.children[0].runtimeStyle.top = scrolly
this.children[0].runtimeStyle.top = scrolly 
 }
} 
 }
} 

 scrollDiv.onmouseup = function()
scrollDiv.onmouseup = function() 


 {
{ 
 this.releaseCapture()
this.releaseCapture() 
 }
} 

 scrollDiv.state = "scroll"
scrollDiv.state = "scroll" 
 setInterval(scroll_script, speed ? speed : 30)
setInterval(scroll_script, speed ? speed : 30) 
 }
} 
 </script>
</script> 

 <script language="JScript">
<script language="JScript"> 
 
 window.onload = new Function("scroll(document.all['testDiv'], 300)")
window.onload = new Function("scroll(document.all['testDiv'], 300)") 
 </script>
</script> 
 <br>
<br> 
 <button onclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button>
<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.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='stop'"><span style="font-family: Webdings">;</span>停止</button> 
 <button onclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</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='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>
<button onclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button> 
 <br>
<br> 
 缩放:
缩放: 
 <select onchange="testDiv.zoom = this.options[selectedIndex].value">
<select onchange="testDiv.zoom = this.options[selectedIndex].value"> 
 <option value=1>100%</option>
<option value=1>100%</option> 
 <option value=2>200%</option>
<option value=2>200%</option> 
 <option value=3>300%</option>
<option value=3>300%</option> 
 </select>
</select>      
 托动范围:
托动范围: 
 <select onchange="testDiv.drag = this.options[selectedIndex].value">
<select onchange="testDiv.drag = this.options[selectedIndex].value"> 
 <option value="both">随意</option>
<option value="both">随意</option> 
 <option value="horizontal" selected>横向</option>
<option value="horizontal" selected>横向</option> 
 <option value="vertical">纵向</option>
<option value="vertical">纵向</option> 
 </select>
</select> 
        posted on 
2007-02-12 13:04 
mbskys 
阅读(
315) 
评论() 
 
收藏 
举报