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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
JsRender实用入门教程
Oct 31 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
vuex实现购物车功能
Jun 28 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 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
php调用google接口生成二维码示例
2014/04/28 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python基本语法练习实例
2017/09/19 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
python数据化运营的重要意义
2019/11/25 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
50道外企软件测试面试题
2014/08/18 面试题
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
教师绩效工资方案
2014/02/01 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
销售助理岗位职责
2014/02/21 职场文书
客房部经理岗位职责
2015/02/02 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏
java版 联机五子棋游戏
2022/05/04 Java/Android