[置顶] 浅析移动DIV盒子自动测算电脑屏幕XY坐标显示
2017-03-31 16:03
183 查看
<!DOCTYPE html> <html> <head runat="server"> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var mouseX, mouseY; var objX, objY; var isDowm = false; //是否按下鼠标 function mouseDown(obj, e) { obj.style.cursor = "move"; objX = div1.style.left; objY = div1.style.top; mouseX = e.clientX; mouseY = e.clientY; isDowm = true; } function mouseMove(e) { var div = document.getElementById("div1"); var x = e.clientX; var y = e.clientY; if (isDowm) { div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px"; div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px"; document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left; } } function mouseUp(e) { if (isDowm) { var x = e.clientX; var y = e.clientY; var div = document.getElementById("div1"); div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px"; div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px"; document.getElementById("span2").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left; mouseX = x; rewmouseY = y; div1.style.cursor = "default"; isDowm = false; } } </script> </head> <body> <span id="span1"></span></br><span id="span2"></span></br> <div id="div1" style="background-color: Green; border: 1px solid red; height: 300px; top: 100px; left: 100px; width: 300px; position: absolute;" onmousedown="mouseDown(this,event)" onmousemove="mouseMove(event)" onmouseup="mouseUp(event)"> </div> </body> </html>
相关文章推荐
- 实现让一个DIV在电脑屏幕的正中间显示!
- 如何把经纬度坐标转换为屏幕显示坐标?
- 如何让div根据内容自动显示水平垂直滚动条
- liigo:在PC电脑屏幕上模拟显示移动设备屏幕的物理尺寸示意图
- jquery实现让导航超出显示范围外时自动贴在屏幕最顶上
- 始终在屏幕中间显示Div的代码(css+js)
- 如何使一个页面自动显示在屏幕的中央
- DIV弹出层练习(二) ------------------现有一层div想获取鼠标的光标位置并作为这个层的坐标显示出这个层
- 设置DIV显示在屏幕中间
- 如何始终在屏幕中间显示Div
- [置顶]给GridView加点料:Div动态浮动显示
- 根据控件坐标显示div
- 怎么让弹出的窗体Form显示在屏幕的某一个坐标位置
- JQuery 浮动DIV显示提示信息并自动隐藏
- 让超出DIV宽度范围的文字自动显示省略号...
- 在Jquery中让一个容器div显示在屏幕正中央
- 电话自动拨号,点击拨号,快速拨号,物流抢线拨号,屏幕取号,鼠标拨号,电脑拨号
- 如何让body及里面的div、表格等自动适应屏幕高度
- 将屏幕分为4个DIV 点击某一个div时 全屏显示
- 在做CRM界面的时候遇到的DIV滚动条自动显示的问题!!和解决方法!