javascript实现拖动层效果代码(许愿墙)
2013-06-08 13:58
811 查看
原理: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>
相关文章推荐
- javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)
- javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)
- Javascript实现的类似Google的Div拖动效果代码
- Javascript实现的类似Google的Div拖动效果代码
- 简单的Javascript实现拖动层效果
- javascript 事件处理、鼠标拖动效果实现方法详解
- javascript 实现拖动效果
- javascript suggest效果 自动完成实现代码分享
- JavaScript实现表格快速变色效果代码
- javascript 简单抽屉效果的实现代码
- JavaScript Ajax Json实现上下级下拉框联动效果实例代码
- javascript面向对象的方式实现的弹出层效果代码
- jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
- javascript 回到顶部效果的实现代码
- javascript实现的左右选择框效果代码
- javascript实现的textarea运行框效果代码 不用指定id批量指定
- Jquery一行代码轻松实现拖动效果
- 教你用javascript实现随机标签云效果_附代码
- jQuery实现的跨容器无缝拖动效果代码