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 相关文章推荐
js获取系统的根路径实现介绍
Sep 08 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
JavaScript登录验证基础教程
Nov 01 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 SQLite类
2009/05/07 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jquery移动节点实例
2015/01/14 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
React组件refs的使用详解
2018/02/09 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
Vue实现手机计算器
2020/08/17 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
简单的编程0基础下Python入门指引
2015/04/01 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
会计学生自我鉴定
2014/02/06 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
与美同行演讲稿
2014/09/13 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis