JS控制js图片移动效果

&&&您需要以后才能回答,未注册用户请先。js自动移动图片,键盘可控制方向_百度文库
两大类热门资源免费畅读
续费一年阅读会员,立省24元!
js自动移动图片,键盘可控制方向
上传于||文档简介
&&j​s​自​动​移​动​图​片​,​键​盘​可​控​制​方​向​,
阅读已结束,如果下载本文需要使用0下载券
想免费下载更多文档?
你可能喜欢+ 相关素材js控制图片滚动效果,可向各个方向滚动,也可以让它停止滚动。
以下是程序代码&HTML&
&meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /&
&meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" /&
&TITLE&js图片滚动控制效果,sky整理收集。&/TITLE&
&BODY STYLE="overflow: border: 0" topmargin=0 leftmargin=0&
&a href="&#ZC_BLOG_HOST#&"&站长特效网&/a&,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。&hr&
&!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,,用.net打造靓站--&
&tr&&td style="padding: 5"&
&div id="testDiv" style="border: buttonface 2 solid"&
&img src="/image/2.jpg" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:"/&
&script language="JScript"&
function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed)
var scrollDiv
var scrollContent
= document.createElement("span")
scrollContent.style.position = "absolute"
scrollDiv.applyElement(scrollContent, "inside")
var displayWidth
!= "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)
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
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
var scroll_script =
"var scrollDiv = " + scrollDiv.uniqueID
"var scrollObj = " + scrollContent.uniqueID
"var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"
"var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"
"var scrollx = scrollObj.runtimeStyle.pixelLeft"
"var scrolly = scrollObj.runtimeStyle.pixelTop"
"switch (scrollDiv.state.toLowerCase())"
"case ('scroll')
"switch (scrollDiv.direction)"
"case ('left')
"scrollx = (--scrollx) % contentWidth"
"case ('right')
"scrollx = -contentWidth + (++scrollx) % contentWidth"
"case ('up')
"scrolly = (--scrolly) % contentHeight"
"case ('down')
"scrolly = -contentHeight + (++scrolly) % contentHeight"
"case ('left_up')
"scrollx = (--scrollx) % contentWidth"
"scrolly = (--scrolly) % contentHeight"
"case ('left_down')
"scrollx = (--scrollx) % contentWidth"
"scrolly = -contentHeight + (++scrolly) % contentHeight"
"case ('right_up')
"scrollx = -contentWidth + (++scrollx) % contentWidth"
"scrolly = (--scrolly) % contentHeight"
"case ('right_down')
"scrollx = -contentWidth + (++scrollx) % contentWidth"
"scrolly = -contentHeight + (++scrolly) % contentHeight"
"scrollObj.runtimeStyle.left = scrollx"
"scrollObj.runtimeStyle.top = scrolly"
"case ('stop')
"case ('drag')
var contentNode = document.createElement("span")
contentNode.runtimeStyle.position = "absolute"
contentNode.runtimeStyle.width = contentWidth
scrollContent.applyElement(contentNode, "inside")
for (var i=0; i &= scrollXI i++)
for (var j=0; j &= scrollYI j++)
if (i+j == 0)
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
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
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)
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
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")
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)
} //欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
&script language="JScript"&
window.onload = new Function("scroll(document.all['testDiv'], 325)")
&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&
&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&
&/td&&/tr&
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
( 10:50:27)
( 09:30:44)
( 09:29:25)
( 08:48:27)
( 00:16:03)
( 00:16:03)
( 10:29:33)
( 10:32:47)
相关排行总榜

我要回帖

更多关于 js控制图片等比例缩放 的文章

 

随机推荐