网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
背景图像
-> 图片多方向滚动控制效果网页代码
图片多方向滚动控制效果网页代码
作者:图片多方向滚动控制效果网页代码 发布时间:2007-11-11 3:44:39 发布人: admin
<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://web.archive.org/web/20120729015633im_/http://www.jz123.cn/logo.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("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>
图片多方向滚动控制效果 网页特效代码演示
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
向上滚动图片特效网页代码
下一篇:文章:
DIV图层圆边圆角的实现网页码
本类浏览排行 »
搜索页面中的内容
又一款综合搜索引擎代码
标题栏显示当前时间
倒影效果的电子表,显示当前时间
自动记录当前页面最新的更新日期
JS让网页每隔2秒弹出一次对话框
一款超酷的CSS列表排行榜
鼠标悬停放大的纯CSS分页效果
本站推荐文章 »
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果
很酷的图片伸缩放大功能
较好的视觉效果的网页选项卡
CSS实例:通过定义渐变边框给图片加阴影