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 相关文章推荐
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
Nuxt.js实战详解
Jan 18 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
WINXP下apache+php4+mysql
2006/11/25 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python兔子毒药问题实例分析
2015/03/05 Python
Python Requests安装与简单运用
2016/04/07 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python实现媒体播放器功能
2018/02/11 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python各层级目录下import方法代码实例
2020/01/20 Python
如何理解python面向对象编程
2020/06/01 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
汽车技术服务英文求职信范文
2014/01/02 职场文书
高中物理教学反思
2014/02/08 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
创业计划书之服装
2019/10/07 职场文书
python删除csv文件的行列
2021/04/06 Python