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 Form.elements[i]的使用实例
Nov 13 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
解决$store.getters调用不执行的问题
Nov 08 Javascript
JS图片懒加载的优点及实现原理
Jan 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP+DBM的同学录程序(2)
2006/10/09 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php数组去重复数据示例
2014/02/25 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python多线程并发及测试框架案例
2019/10/15 Python
简单了解python数组的基本操作
2019/11/26 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
Django celery异步任务实现代码示例
2020/11/26 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
介绍一下Make? 为什么使用make
2016/07/31 面试题
员工自我鉴定范文
2013/10/06 职场文书
个人求职简历的自我评价范文
2013/10/09 职场文书
怎么写好自荐信
2013/10/30 职场文书
xxx同志考察材料
2014/02/07 职场文书
商务经理岗位职责
2014/07/30 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记