js实现页面中的拖拽运动
2016-10-12 19:54
253 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0; padding: 0;} div{width: 800px; height: 40px; border: 5px solid cadetblue; background: orange;position: absolute;} </style> <script type="text/javascript"> window.onload=function(){ var oCl=document.getElementById('cl'); var disx=0;//用来装鼠标在拖动元素中的相对x轴位置 var disy=0;//<span style="font-family: Arial, Helvetica, sans-serif;">用来装鼠标在拖动元素中的相对y轴位置</span> oCl.onmousedown=function(ev){//鼠标按下时换获取坐标 var oEvent=ev || event;//Event的兼容性处理 disx=oEvent.clientX-oCl.offsetLeft;//求出<span style="font-family: Arial, Helvetica, sans-serif;">鼠标在拖动元素中的相对x轴位置</span> disy=oEvent.clientY-oCl.offsetTop;//<span style="font-family: Arial, Helvetica, sans-serif;">求出</span><span style="font-family: Arial, Helvetica, sans-serif;">鼠标在拖动元素中的相对x轴位置</span> document.onmousemove=function(ev){//鼠标移动时赋给元素坐标 var oEvent=ev || event; var left=oEvent.clientX-disx;//鼠标当时的x坐标减去<span style="font-family: Arial, Helvetica, sans-serif;">鼠标在拖动元素中的相对x轴的值</span> var top=oEvent.clientY-disy;//<span style="font-family: Arial, Helvetica, sans-serif;">鼠标当时的y坐标减去</span><span style="font-family: Arial, Helvetica, sans-serif;">鼠标在拖动元素中的相对y轴的值</span> if(left<0){ left=0;//防止移出屏幕左侧外 } else if(left>document.documentElement.clientWidth-oCl.offsetWidth){ left=document.documentElement.clientWidth-oCl.offsetWidth;//防止移出屏幕右侧外 } if(top<0){ top=0;//防止移出上方 } else if(top>document.documentElement.clientHeight-oCl.offsetHeight){ top=document.documentElement.clientHeight-oCl.offsetHeight;//防止移出下方 } oCl.style.left=left+'px'; oCl.style.top=top+'px';//赋值 } }; document.onmouseup=function(){ document.onmousemove=null;//防止鼠标移动过快脱出元素范围而无法继续控制 } } </script> </head> <body> <div id="cl"></div> </body> </html>
相关文章推荐
- js实现同一页面多个运动效果的方法
- JS实现页面返回顶部的匀加速运动
- 用js实现同一页面多个不同运动效果
- js实现页面左右上下拖拽
- 用js实现同一页面多个不同运动效果
- js实现登陆页面的拖拽功能
- 原生js实现移动端的视频播放可拖拽小窗功能,点击小窗返回到原始页面
- js实现同一页面多个不同运动效果的方法
- 用js实现同一页面多个不同运动效果2
- 用js实现同一页面多个运动效果
- js实现页面跳转的几种方式
- js实现页面跳转的几种方式
- js实现页面跳转的几种方式
- js实现页面跳转的几种方式
- js实现页面跳转的几种方式
- js实现页面跳转的几种方式
- 利用js方法实现html静态页面间参数传递
- 用js实现的仿sohu博客更换页面风格(简单版)
- js实现页面跳转的几种方式
- 利用php和js实现页面数据刷新