<html>
<head>
<title>拖动演示</title>
</head>
<style type="text/css">
#plane1 {position:absolute; left:10; top:20; z-index:5}
#plane2 {position:absolute; left:10; top:20; width:800; height:600; z-index:999; background:url(mask1.png) no-repeat;}
</style>
<SCRIPT LANGUAGE="JavaScript">
var isNav, isIE
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}
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>
<body bgcolor="#fef4d9" onLoad="init()">
<table width="1000" height="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="800" rowspan="3">
<DIV ID=plane1 ><img name="planePic1" src="vista.jpg" border=0></DIV>
<DIV ID=plane2 >
<input type="submit" name="button" id="button" value="向上">
<input type="submit" name="button" id="button" value="向下" onClick="down()">
<input type="submit" name="button" id="button" value="向左">
<input type="submit" name="button" id="button" value="向右"></DIV> </td>
<td width="139"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
js实现鼠标拖动图片做了兼容IE,FF火狐,谷歌等主流浏览器,具体实现代码如下,感兴趣的朋友可以参考下哈,希望对你有所帮助
实现禁止鼠标拖动图片在新窗口打开 .
js实现鼠标在特定框内拖动图片,鼠标位置超出框则无法移动。
js滑块拖动图片对比效果代码 js滑块拖动图片对比效果代码
3d鼠标拖动图片360°旋转动画效果是一款基于jquery实现的鼠标拖动图片3D展示特效代码。
纯HTML+js实现鼠标滚轮动态调整缩放图片大小 演示效果: https://www.bilibili.com/video/BV1pS4y167wJ/
这是一款纯js实现360度旋转预览图片特效。该js特效仅使用120行代码,即可实现通过滑块、或鼠标手动360度旋转图片,以及自动360度旋转图片的效果。
主要介绍了JS实现超简单的鼠标拖动效果,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
实现图片的滑轮滚动放大预览、拖动、旋转功能,此文件为完整页面demo及JS文件
一款鼠标拖动滑块进行图片前后修改对比显示js特效,拖动滑块图片对比代码。
jQuery实现鼠标滑过图片在图片上下滑动显示图片信息特效
在JavaScript实现中,我们使用了drag事件来实现鼠标拖动位置互换效果。首先,我们定义了一个drag对象,用于存储被拖动的目标元素、起始X坐标和起始Y坐标。然后,我们使用addEventListener方法来监听mousedown、...
js拖动代码 js拖动效果 js拖动例子
本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法。分享给大家供大家参考。具体实现方法如下: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
用javascript方法实现图片的放大缩小和随鼠标的拖动而动
主要介绍了vue+mousemove实现鼠标拖动功能,文中给大家介绍了鼠标移动过快拖动就失效问题的解决方法,需要的朋友可以参考下
鼠标拖动,图片像翻书一样翻过的动态效果js +flash实现
js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小文件,在每个压缩包是一个,打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里,记事本打开...
前端用于鼠标拖拽排序,亲测可用,如果需要动态加载数据,请设置延迟加载