JavaScript与Div对层定位和移动获得坐标的实现代码


Posted in Javascript onSeptember 08, 2010

1:移动图层 获得点的x轴y轴坐标,从而进行绝对定位(注意:竖拉框会影响 x 轴 y 轴坐标值)

var x,y,z,down=false,obj 
function init(){ 
obj=event.srcElement //事件触发对象 
obj.setCapture() //设置属于当前对象的鼠标捕捉 
z=obj.style.zIndex //获取对象的z轴坐标值 
//设置对象的z轴坐标值为100,确保当前层显示在最前面 
obj.style.zIndex=100 
x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标 
y=event.offsetY //获取鼠标指针位置相对于触发事件的对象的Y坐标 
down=true //布尔值,判断鼠标是否已按下,true为按下,false为未按下 
} 
function moveit(){ 
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上 
if(down&&event.srcElement==obj){ 
with(obj.style){ 
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/ 
// posLeft=event.x-x; 
posLeft=document.body.scrollLeft+event.x-x; 
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/ 
// posTop=event.y-y; 
posTop=document.body.scrollTop+event.y-y; 
window.status="posLeft="+posLeft+",posTop="+posTop; 
window.status=window.status+"clientX="+event.clientX+"clientY="+event.clientY+"scrollLeft="+document.body.scrollLeft+"scrollTop="+document.body.scrollTop+",event.y="+event.y+",event.x"+event.x; 
} 
} 
} 
function stopdrag(){ 
//onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false 
down=false 
obj.style.zIndex=z //还原对象的Z轴坐标值 
obj.releaseCapture() //释放当前对象的鼠标捕捉 
//alert("X:"+obj.style.left+";Y:"+obj.style.top); 
}

2:为了使图层在不同分辨率浏览器上显示同样的效果,我们需要对图层定位设置

第一步:对最外层 进行相对定位

<div id="t" style="position:relative;top:0px;left:0px;"> </div>

第二步:在相对里面进行决对定位(这样图层就不会随着分辨率的改变而变形)

<div id="t" style="position:relative;top:0px;left:0px;"> 
<div id="tt" style="position:absolute;top:9px;left:317px;"> 
<IMG id="hong" SRC="main/1.jpg" WIDTH="8" HEIGHT="8" BORDER="0" 
ALT="" /> 
</div> 
<div >省略</div> 
<div >省略</div> 
<div >省略</div> 
<div >省略</div> 
<div >省略</div> 
<div >省略</div> 
<div >省略</div> 
<div >省略</div> 
<div >省略</div>

//===================(层移动方法调用)=============================
<div onmousedown=init() onmousemove=moveit() 
onmouseup=stopdrag() 
style="position:absolute;left:60;top:190;width:5;height:5;z-index:99;;border:1px solid #000000;"> 
D 
</div> 
</div>
Javascript 相关文章推荐
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
jsTree使用记录实例
Dec 01 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
JS实现简单的表格增删
Jan 16 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 #Javascript
Javascript的一种模块模式
Sep 08 #Javascript
jQeury淡入淡出需要注意的问题
Sep 08 #Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 #Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 #Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 #Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP与SQL注入攻击[二]
2007/04/17 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
js三种排序算法分享
2012/08/16 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
聊聊Python中的pypy
2018/01/12 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
python 如何停止一个死循环的线程
2020/11/24 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
大专生自我评价
2014/01/28 职场文书
优秀员工评语
2014/02/10 职场文书
大学老师推荐信
2014/02/25 职场文书
保护环境建议书400字
2014/05/13 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
追讨欠款律师函
2015/06/24 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
mysql如何能有效防止删库跑路
2021/10/05 MySQL