javascript实现拖动层效果代码(许愿墙)
16lz
2021-01-22
原理:javascript实现拖动层,原理很简单,就是根据鼠标的位置实时设置层的left和top
效果图如下:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript实现拖动层效果代码(许愿墙)</title> <style> #main div{ width: 220px; height:150px; bordre: 1px solid #999; position: absolute; } </style> <script> var a; document.onmouseup = function(){ if(!a)return; a=""; } document.onmousemove = function(d){//鼠标每动一下的事件 if(!a)return; d = d||event; a.style.left = (d.clientX-b)+"px"; a.style.top = (d.clientY-c)+"px"; } function $(o,e){ a=o; b=e.clientX-parseInt(a.style.left); c=e.clientY-parseInt(a.style.top); } </script> </head> <body> <div id="main"> <div style="left:100px;top:100px;background:#fc9;" onmousedown="$(this,event)">1</div> <div style="left:400px;top:100px;background:#9cf;" onmousedown="$(this,event)">2</div> <div style="left:700px;top:100px;background:#f9c;" onmousedown="$(this,event)">3</div> <div style="left:100px;top:300px;background:#9fc;" onmousedown="$(this,event)">4</div> <div style="left:400px;top:300px;background:#cf9;" onmousedown="$(this,event)">5</div> <div style="left:700px;top:300px;background:#c9f;" onmousedown="$(this,event)">6</div> </div> </body> </html>
更多相关文章
- Java 集合类实现原理
- Android 多线程下载文件原理霸气解析介绍 (完结版)-----greendao
- JVM 内部原理(五)— 基本概念之 Java 虚拟机官方规范文档,第 7 版
- java动态编译 (java在线执行代码后端实现原理)