设为首页
|
加入收藏
您好，欢迎来到点滴吧！
手机版
www.diandiba.com
记录点点滴滴，尽在点滴吧
文章
文章
特效
素材
景点
首页
手机
建站
源码
服务器
生活
常识
健康
美食
美容
旅游
景点
攻略
游记
特产
知识
笑话
名句
散文
故事
编程
ASP
PHP
.NET
SQL
软件
Office
QQ
Photoshop
特效
幻灯片
图片相册
播放器
素材
图片
PSD素材
网页模板
您现在的位置：
首页
>
表格图层
> 特效详情
简单实用的可自由拖动的层
更新时间：2015/1/4 22:02:19 下载：3545次
<!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> <title>简单实用的可自由拖动窗口</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> </head> <body> <div id="demo" style="width:100px;height:100px;position:absolute;background:red;cursor:move;"></div> <script type="text/javascript"> function drag(o){var a="onmousemove",b="setCapture",c="releaseCapture",f="clientY",g="clientX",d=document,z=d.documentElement,x,y,t,l,w,h;o=d.getElementById(o);o.onmousedown=function(e){e=e||event;x=e[g]-o.offsetLeft;y=e[f]-o.offsetTop;d[a]=function(e){e=e||event;t=e[f]-y;l=e[g]-x;w=z.clientWidth-o.offsetWidth;h=z.clientHeight-o.offsetHeight;l<0&&(l=0);t<0&&(t=0);l>w&&(l=w);t>h&&(t=h);with(o.style){top=t+"px";left=l+"px"}};d.onmouseup=function(){d[a]=null;o[c]&&o[c]()};o[b]&&o[b]();return false}}; drag("demo"); </script> </body> </html>
预览效果
复制代码
保存代码
提示：可以先修改部分代码后再运行
上一个素材：
点击单元格复制单元格内容
下一个素材：
没有了
相关特效
Js模拟的Dialog弹出浮动框
js表格自由拖拽排序特效代
手机端微信分享到朋友圈提
定位层始终保持在当前可见
导航分类
热门文章
1
js表格自由拖拽排序特效代码
2
Js模拟的Dialog弹出浮动框
3
jQuery弹出框按省市选择学校代
4
手机端微信分享到朋友圈提示效
5
jQuery多功能弹出层插件Lightc
6
点击单元格复制单元格内容
7
点击按钮选中表格中指定的内容
8
定位层始终保持在当前可见屏
9
让DIV层保持在页面的中央(水平
10
简单实用的可自由拖动的层
关于我们
|
联系我们
|
免责声明
|
网站地图
|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2
www.diandiba.comwww.diandiba.com
