UDN-企业互联网技术人气社区

板块导航

浏览  : 652
回复  : 4

[原生js] JavaScript与Div对层定位和移动获得坐标的实现代码

[复制链接]
牛娜的头像 楼主
发表于 2017-1-8 13:46:33 | 显示全部楼层 |阅读模式
  JavaScript与Div对层定位和移动获得坐标的实现代码,需要的朋友可以参考下。

  1:移动图层 获得点的x轴y轴坐标,从而进行绝对定位(注意:竖拉框会影响 x 轴 y 轴坐标值)
  
  复制代码 代码如下:

  1. var x,y,z,down=false,obj
  2. function init(){
  3. obj=event.srcElement //事件触发对象
  4. obj.setCapture() //设置属于当前对象的鼠标捕捉
  5. z=obj.style.zIndex //获取对象的z轴坐标值
  6. //设置对象的z轴坐标值为100,确保当前层显示在最前面
  7. obj.style.zIndex=100
  8. x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标
  9. y=event.offsetY //获取鼠标指针位置相对于触发事件的对象的Y坐标
  10. down=true //布尔值,判断鼠标是否已按下,true为按下,false为未按下
  11. }
  12. function moveit(){
  13. //判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
  14. if(down&&event.srcElement==obj){
  15. with(obj.style){
  16. /*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/
  17. // posLeft=event.x-x;
  18. posLeft=document.body.scrollLeft+event.x-x;
  19. /*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
  20. // posTop=event.y-y;
  21. posTop=document.body.scrollTop+event.y-y;
  22. window.status="posLeft="+posLeft+",posTop="+posTop;
  23. 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;
  24. }
  25. }
  26. }
  27. function stopdrag(){
  28. //onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
  29. down=false
  30. obj.style.zIndex=z //还原对象的Z轴坐标值
  31. obj.releaseCapture() //释放当前对象的鼠标捕捉
  32. //alert("X:"+obj.style.left+";Y:"+obj.style.top);
  33. }
复制代码

  2:为了使图层在不同分辨率浏览器上显示同样的效果,我们需要对图层定位设置
  
  第一步:对最外层 进行相对定位

  
  复制代码 代码如下:  
  
  1. <div id="t" style="position:relative;top:0px;left:0px;"> </div>
复制代码
  
  第二步:在相对里面进行决对定位(这样图层就不会随着分辨率的改变而变形)
  
  复制代码 代码如下:

  1. <div id="t" style="position:relative;top:0px;left:0px;">
  2. <div id="tt" style="position:absolute;top:9px;left:317px;">
  3. <IMG id="hong" SRC="main/1.jpg" WIDTH="8" HEIGHT="8" BORDER="0"
  4. ALT="" />
  5. </div>
  6. <div >省略</div>
  7. <div >省略</div>
  8. <div >省略</div>
  9. <div >省略</div>
  10. <div >省略</div>
  11. <div >省略</div>
  12. <div >省略</div>
  13. <div >省略</div>
  14. <div >省略</div>
复制代码

  //===================(层移动方法调用)=============================

  1. <div onmousedown=init() onmousemove=moveit()
  2. onmouseup=stopdrag()
  3. style="position:absolute;left:60;top:190;width:5;height:5;z-index:99;;border:1px solid #000000;">
  4. D
  5. </div>
  6. </div>
复制代码
发表于 2017-1-8 13:47:03 | 显示全部楼层
又见楼主分享帖子
使用道具 举报

回复

发表于 2017-1-8 13:47:03 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

发表于 2017-1-8 13:47:04 来自手机 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“﹏薔薇ヽ骑士“
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部