<HTML>
<HEAD>
<TITLE>图片滚动控制效果－</TITLE>
</HEAD>
<BODY STYLE="overflow: hidden; border: 0" topmargin=0 leftmargin=0>
<table>
<tr><td style="padding: 5">
<div id="testDiv" style="border: buttonface 2 solid">
<img src="http://www.fxzww.com/alixixi.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 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" "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 = ("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 οnclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button>
<button οnclick="testDiv.direction='left'; testDiv.state='scroll'"><span style="font-family: Webdings">3</span>向左</button>
<button οnclick="testDiv.state='stop'"><span style="font-family: Webdings">;</span>停止</button>
<button οnclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</span>播放</button>
<button οnclick="testDiv.direction='right'; testDiv.state='scroll'"><span style="font-family: Webdings">4</span>向右</button>
<button οnclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button>
<br>
缩放：
<select οnchange="testDiv.zoom = this.options[selectedIndex].value">
<option value=1>100%</option>
<option value=2>200%</option>
<option value=3>300%</option>
</select>
托动范围：
<select οnchange="testDiv.drag = this.options[selectedIndex].value">
<option value="both">随意</option>
<option value="horizontal" selected>横向</option>
<option value="vertical">纵向</option>
</select>
</td></tr>
</table>
</BODY>
</HTML>
提问和评论都可以，用心的回复会被更多人看到
评论
发布评论
相关文章
-
javascript图片滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt
JavaScript 休闲 javascript滚动效果 图片跑马灯 javascript跑马灯 -
css实现手机图片滚动效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
手机图片滚动 css3 html5 iphone html -
图片 jquery图片自滚动瀑布流效果
jquery图片自滚动瀑布流效果,不错的瀑布流效果查看原文查看在线演示Demo和更多原文内容教程：http://ibloger.net/article/1196.html
jquery图片自滚 图片自滚瀑布流 图片自滚瀑布流效果 图片自滚效果 图片自滚特效 -
JS控制图片滚动的效果
m
html i++ ide xml 3c
