网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
背景图像
-> 可以用鼠标随意拖动位置的图片
可以用鼠标随意拖动位置的图片
作者:admin 发布时间:2010-10-18 8:24:08 发布人: admin
<html> <head> <title>可以用鼠标随意拖动位置的图片丨网页特效丨myjs.jz123.cn</title> <style type="text/css"> #plane1 {position:absolute; left:290; top:170; width:121; z-index:0} #plane2 {position:absolute; left:400; top:250; width:118; z-index:0} </style> <script language="JavaScript"> var isNav, isIE if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true } } // ***Begin CSS custom API Functions*** // Set zIndex property function setZIndex(obj, zOrder) { obj.zIndex = zOrder } // Position an object at a specific pixel coordinate function shiftTo(obj, x, y) { if (isNav) { obj.moveTo(x,y) } else { obj.pixelLeft = x obj.pixelTop = y } } // ***End API Functions*** // Global holds reference to selected element var selectedObj // Globals hold location of click relative to element var offsetX, offsetY // Find out which element has been clicked on function setSelectedElem(evt) { if (isNav) { // declare local var for use in upcoming loop var testObj // make copies of event coords for use in upcoming loop var clickX = evt.pageX var clickY = evt.pageY // loop through all layers (starting with frontmost layer) // to find if the event coordinates are in the layer for (var i = document.layers.length - 1; i >= 0; i--) { testObj = document.layers[i] if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height)) { // if so, then set the global to the layer, bring it // forward, and get outa here selectedObj = testObj setZIndex(selectedObj, 100) return } } } else { // use IE event model to get the targeted element var imgObj = window.event.srcElement // make sure it's one of our planes if (imgObj.parentElement.id.indexOf("plane") != -1) { // then set the global to the style property of the element, // bring it forward, and say adios selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } } // the user probably clicked on the background selectedObj = null return } // Drag an element function dragIt(evt) { // operate only if a plane is selected if (selectedObj) { if (isNav) { shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)) } else { shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) // prevent further system response to dragging in IE return false } } } // Set globals to connect with selected element function engage(evt) { setSelectedElem(evt) if (selectedObj) { // set globals that remember where the click is in relation to the // top left corner of the element so we can keep the element-to-cursor // relationship constant throughout the drag if (isNav) { offsetX = evt.pageX - selectedObj.left offsetY = evt.pageY - selectedObj.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } // block mouseDown event from forcing Mac to display // contextual menu. return false } // Restore elements and globals to initial values function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) selectedObj = null } } // Turn on event capture for Navigator function setNavEventCapture() { if (isNav) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) } } // Assign event handlers used by both Navigator and IE (called by onLoad) function init() { if (isNav) { setNavEventCapture() } // assign functions to each of the events (works for both Navigator and IE) document.onmousedown = engage document.onmousemove = dragIt document.onmouseup = release } </script> </head> <body bgcolor="#fef4d9" onload="init()"> 下面的图像你可以用鼠标随意拖动 <div id="plane1"><img name="planePic1" src="http://web.archive.org/web/20150530064257im_/http://www.jz123.cn/image/logo.png" border="0"></div> </body> </html>
可以用鼠标随意拖动位置的图片
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
一款清新浅绿风格CSS下拉菜单
下一篇:文章:
指定时间内消失的图片
本类浏览排行 »
指定时间内消失的图片
可以用鼠标随意拖动位置的图片
一款清新浅绿风格CSS下拉菜单
一款兼容IE和FF的纯CSS三级下拉菜单
关闭页面时弹出窗口的js代码
js 动态为talbe 添加行效果
CSS制作横向弹出的三级下拉菜单
非常酷的css带说明信息导航菜单
本站推荐文章 »
一款设计精美的CSS滑动门菜单
一款简洁漂亮的CSS滑动门特效
结构和表现分离的Tab选项卡特效
滑动的div层做的动态菜单
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动