<html>
<head>
<style type="text/Css">
.dragme{position:relative;}
</style>
<script type="text/javascript">
//alert(document.getElementById("moveid").style.left);
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
var getX;
var getY;
function movemouse(e){
if (isdrag){
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
//alert(getX);
// alert(getY);
return false;
}
}
function selectmouse(e){
/*
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "Html" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme") {
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
*/
fobj = document.getElementById("moveid")
if (fobj.className=="dragme") {
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
//得到元素的坐标位置
function findPosition(id)
{
oElement = document.getElementById(id)
var x2 = 0;
var y2 = 0;
var width = oElement.offsetWidth; //得到元素的宽度
var height = oElement.offsetHeight;
//alert(width + "=" + height);
if( typeof( oElement.offsetParent ) != 'undefined' )
{
for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent )
{
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
x2 = posX + width;
y2 = posY + height;
//alert("sun:"+ posX);
//alert(posY);
// return [ posX, posY ,x2, y2];
} else{
x2 = oElement.x + width;
y2 = oElement.y + height;
alert(oElement.x);
alert(oElement.y);
//return [ oElement.x, oElement.y, x2, y2];
}
getX = posX - 200;
getY = posY - 10;
alert(getX);
alert(getY);
}
</script>
</head>
<body>
<div align="left" style="position:absolute;z-index:1;left: 200px;top: 10px;"><img src="upload/vista.jpg" id="moveid" class="dragme" ></div>
<div align="center" id="nav" style="position:absolute;z-index:999;width:800px;height:600px;overflow:hidden;background:url(template/1.gif) no-repeat;left: 200px;top: 10px;">
<input name="" type="button" value="提交" onClick= "findPosition('moveid')">
</div>
<script language="javascript">
//var obj = document.getElementById("moveid");
//findPosition(obj);
//obj = document.getElementById("nav");
//findPosition(obj);
</script>
</html>
分享到：
相关推荐
纯HTML+js实现鼠标滚轮动态调整缩放图片大小 演示效果: https://www.bilibili.com/video/BV1pS4y167wJ/
59:___纯CSS实现鼠标移上图片添加阴影效果 60:___经典的图片切换 61:___网站首页js幻灯片代码 62:___美化过的匀速图片滚动 63:___腾讯QQ网站的Js图片切换 64:___自写Js+CSS轮显效果 65:___自动播放——Js幻灯片缓冲...
本资源中包含CSS+JS滚动图片功能代码、CSS将图片自动变为圆角、CSS强制等比例缩小图片、CSS实现自适应的图片背景边框、CSS使用图片完美修饰的全兼容圆角框、CSS完成神奇创意的相框、CSS制作的类似相册浏览的功能、...
33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真...
33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色...
实例253 背景图片纵向重复显示 393 实例254 通过按钮变换背景颜色 395 实例255 背景自动变色 396 实例256 百叶窗 396 实例257 渐隐渐显的背景颜色 398 实例258 页面缩小 399 实例259 页面上下打开效果...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...
jQuery实现鼠标上下移动菜单垂直滚动效果是网页上的jquery菜单，鼠标放上上下滚动的导航菜单，鼠标放在任意一个菜单项上，该菜单项背景变色，高亮显示，竖向排列，没有怎么美化。
2、原生JavaScript实现，不依赖任何第三方js库和插件 3、多图形绘制（支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形绘制） 4、拖拽式绘制（鼠标移动过程中不断进行canvas重绘） 5、图片...
33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用Banner大图片横向切换效果 36.jquery实用产品图片展示动感切换效果源码 37.jquery平滑交换真彩色...
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
包括以下javascript例子： 实现多级关联选择地址 js代码－全国省市县无刷新多级关联菜单.html 背景居中.htm 变颜色的菜单.htm 标题栏显示时间.htm 打开于关闭窗口.htm 带阴影的时钟.htm 倒计时.htm 倒计时2.htm 导 ...
33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色...
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色...
5.2 背景图片 5.3 背景综合一：我的个人主页 5.4 背景综合二：古词《念奴娇·赤壁怀古》 第6章 用CSS设置表格与表单的样式 6.1 控制表格 6.2 表格实例一：隔行变色 6.3 表格实例二...
5.2.5 添加多个背景图片 5.2.6 背景样式综合设置 5.3 背景综合一：我的个人主页 5.4 背景综合二：古词《念奴娇·赤壁怀古》 第6章 用CSS设置表格与表单的样式 6.1 控制表格 6.1.1 表格中的标记 ...
7.13 使用鼠标拖动图片... 207 7.14 交换式图片按钮... 209 7.15 显示或隐藏图片... 210 7.16 在鼠标单击处显示图片... 211 7.17 鼠标经过时改变一行表格的颜色... 212 7.18 网页弹出菜单... 213 7.19 网页...
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...
7.14 滑动效果的背景图片 7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停...