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分页代码(简洁实用)
Nov 05 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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 clearstatcache()函数详解
2010/03/02 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
九步学会Python装饰器
2015/05/09 Python
用Eclipse写python程序
2018/02/10 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
python实现月食效果实例代码
2019/06/18 Python
django fernet fields字段加密实践详解
2019/08/12 Python
python输入错误后删除的方法
2019/10/12 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python中的插入排序的简单用法
2021/01/19 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
颐和园导游词
2015/01/30 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang