CHY Web 3 Move
来源:互联网 发布:出试卷的软件 编辑:程序博客网 时间:2024/06/04 18:47
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 300px; height: 200px; background-color: gray; } div:hover{ cursor: move; } </style> <script> /* * 分析: * 获取鼠标实时移动的坐标;m_move_x,m_move_y * 鼠标按下时的坐标;m_down_x,m_down_y * div的坐标;dx,dy * 鼠标按下时,鼠标与div的偏移量;md_x,md_y * div的新坐标;ndx,ndy */ var isDown = false;//记录鼠标状态 var move_div ;//要操作的div对象 var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy; //鼠标按下 function down(){ move_div = document.getElementById("move_div"); isDown = true; //获取鼠标按下时坐标 m_down_x = event.pageX; m_down_y = event.pageY; //获取div坐标 dx = move_div.offsetLeft; dy = move_div.offsetTop; //获取鼠标与div偏移量 md_x = m_down_x - dx; md_y = m_down_y - dy; } //鼠标移动 function move(){ move_div = document.getElementById("move_div"); //实时更新div的坐标 dx = move_div.offsetLeft; dy = move_div.offsetTop; //获取鼠标移动实时坐标 m_move_x = event.pageX; m_move_y = event.pageY; //鼠标按下时移动才触发 if(isDown){ //获取新div坐标,鼠标实时坐标 - 鼠标与div的偏移量 ndx = m_move_x - md_x; ndy = m_move_y - md_y; //把新div坐标值赋给div对象 move_div.style.left = ndx+"px"; move_div.style.top = ndy+"px"; } } //鼠标释放 function up(){ isDown = false; } </script> </head> <body> <div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div> </body></html>
阅读全文
0 0
- CHY Web 3 Move
- CHY Web 2 Color
- CHY Web 4 Qian Niu
- Move
- Move
- Move
- Move..
- Move!Move!!Move!!!
- Move Move Look
- Move.c && Move.h
- Move.h && Move.c
- 测试3——探究shrink和move原理
- 《C++ Concurrency in Action》笔记3 move线程对象
- Unity3d笔记3-Move和SimpleMove的区别
- Move on
- Move函数
- ----Move on-----
- move 操作
- 移动应用设计:注册和表单
- 恶意软件Chrysaor在Android平台上的调查结果
- 转移Eclipse的AVD的配置文件位置
- 马上报名 | Google Play 线上训练营四月课程报名及三月课程总结
- Android 兼容性 | 充分利用新款 Android 旗舰设备上更大的纵横比
- CHY Web 3 Move
- 重磅登场!Google Play Console 新装降临
- h5标签之fieldset
- 读取word文本、图片(一)编程部分
- Android O移除HttpsURLConnection中不安全的TLS版本回退
- 帮助AdMob团队,也就是帮助您自己
- 寻找全中国使用TensorFlow的开发者和公司
- Android O 中对设备标识符所做的变更
- Google研究 | 使用一致的哈希算法分配临界负载