JavaScript鼠标拖动
2016-06-11 21:23
288 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>movemouse</title> <style> *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; background-color: rebeccapurple; } </style> </head> <body> <div id="box" style="position: absolute;left: 0px; top: 0px;"></div> </body> <script> var box = document.getElementById("box"); var dx = 0; var dy = 0; var flag = false; box.onmousedown = function (e) { var ent = e || window.event; dx = ent.clientX - parseFloat(this.style.left); dy = ent.clientY - parseFloat(this.style.top); flag = true; } document.body.onmousemove = function (e) { if(!flag) { return; } var ent = e || window.event; box.style.left = ent.clientX - dx + "px"; box.style.top = ent.clientY - dy + "px"; } box.onmouseup = function (e) { flag = false; } box.onmouseout = function (e) { flag = false; } </script> </html>
相关文章推荐
- javascript中的对象详解,以及对象和原型链
- 《JavaScript学习笔记》:只能输入数字的文本框
- 【跟着子迟品 underscore】JavaScript 数组展开以及重要的内部方法 flatten
- JS的String对象和Array对象
- javascript中的try catch异常捕获机制
- json 的几种格式及处理
- javascript 原型链和继承(2)
- JS获取当前网页大小以及屏幕分辨率等
- javascript基础
- <Js>引用类型
- JavaScript正则表达式下——相关方法
- js代码的要求
- JavaScript 正则表达式上——基本语法
- R语言JSON转换
- 应用moment.js辅助计算工作时间
- 这是一个JavaScript小算法
- 《JavaScript学习笔记》:拖拽
- Javascript闭包(Closure)代码详解
- js接受url参数
- jsp标签