<div id="testDiv" style="border: buttonface 2 solid"> 
<img src=http://www.51js.com/images/51js/51js.gif>这可以是任意的内容 
</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 : "up"
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+== 0continue 
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 : 30
}
 
</script> 
<script language="JScript"> 
window.onload 
= new Function("scroll(document.all['testDiv'], 300)"
</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>
posted on 2007-02-12 13:04  mbskys  阅读(315)  评论(0)    收藏  举报