图片多方向滚动控制效果
2016-06-02 12:54
405 查看
<HTML>
<HEAD>
<TITLE>图片滚动控制效果－阿里西西www.alixixi.com</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.alixixi.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
= 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_r("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>
</BODY>
</HTML>
http://js.alixixi.com/runcode.asp?id=28598
<HEAD>
<TITLE>图片滚动控制效果－阿里西西www.alixixi.com</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.alixixi.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
= 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_r("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>
</BODY>
</HTML>
http://js.alixixi.com/runcode.asp?id=28598
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DW的一个运行错误 在onLoad运行Dat…
- 与滚动条一起滚动
- 设置时间四种方法
- CSS里怎么让背景图片固定不动
- 鼠标接触图片变亮效果
- 隐藏或屏蔽IE滚动条的几种常用方法
- 上下无间断滚动图像
- 给表格加滚动条
- 滚动条大全（三）
- 滚动条大全（二）
- 滚动条大全（一）
- jmeter 建立一个网络服务的测试计划
- Dreamweaver中轻松插入Java特效
- Dreamweaver自适应客户端分辨率的…
- 改变IE的字体大小设置时，页面字体…
- 背景音乐因为页面的切换而无法连续…
- 表格内的文字不会自动换行
- vmware克隆Centos6.4虚拟机网卡无法启动问题
- PNG透明图片在IE浏览器中正确显示
- ASP双引号的使用