JS实现简洁、全兼容的拖动层实例


Posted in Javascript onMay 13, 2015

本文实例讲述了JS实现简洁、全兼容的拖动层。分享给大家供大家参考。具体分析如下:

这是一款最简洁的JS层拖动代码,全兼容ie、ff、opera、safari……每一种浏览器都有对应的判断和实现方法,你只需复制代码到你的网页中就可使用。水平高的朋友可以继续修改,添加更多方法,使其功能更强大。

<!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>JS拖动层</title>
</head>
<body>
<div id="f" style="position: absolute; width: 216px; height: 138px; 
background-color: skyblue;font-size: 12px; top: 210px; left: 180px;
z-index: 101; border: solid 1px blue;">
<div id="title" style="background-color: Blue; cursor: move; 
height: 20px; color: #fff;font-size: 12px; padding-top: 5px;
padding-left: 10px;">层的标题</div>
层的内容
</div>
<script type="text/javascript">
var posX;
var posY;    
fdiv = document.getElementById("f");      
document.getElementById("title").onmousedown=function(e)
{
  if(!e) e = window.event; //IE
  posX = e.clientX - parseInt(fdiv.style.left);
  posY = e.clientY - parseInt(fdiv.style.top);
  document.onmousemove = mousemove;      
}
document.onmouseup = function()
{
  document.onmousemove = null;
}
function mousemove(ev)
{
  if(ev==null) ev = window.event;//IE
  fdiv.style.left = (ev.clientX - posX) + "px";
  fdiv.style.top = (ev.clientY - posY) + "px";
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
Jquery ui css framework
Jun 28 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 #Javascript
javascript鼠标滑动评分控件完整实例
May 13 #Javascript
javascript实现链接单选效果的方法
May 13 #Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 #Javascript
javascript实现table表格隔行变色的方法
May 13 #Javascript
javascript模拟评分控件实现方法
May 13 #Javascript
javascript动态设置样式style实例分析
May 13 #Javascript
You might like
在字符串中把网址改成超级链接
2006/10/09 PHP
php中JSON的使用与转换
2015/01/14 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
js实现圆盘记速表
2015/08/03 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jQuery动态添加
2016/04/07 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
阿拉伯书店:Jamalon
2019/07/24 全球购物
学雷锋标兵事迹材料
2014/08/18 职场文书
心理健康教育主题班会
2015/08/13 职场文书
小学美术教学反思
2016/02/17 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏