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 相关文章推荐
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 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实现框架(二)
2006/10/09 PHP
PHP+javascript模拟Matrix画面
2006/10/09 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
js保留小数点后几位的写法
2014/01/03 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
python使用scrapy解析js示例
2014/01/23 Python
python中的计时器timeit的使用方法
2017/10/20 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python实现批量压缩图片
2018/01/25 Python
python hook监听事件详解
2018/10/25 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
自我鉴定200字
2013/10/28 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js