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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python版名片管理系统
2018/11/30 Python
解决Django连接db遇到的问题
2019/08/29 Python
简单了解django文件下载方式
2020/02/10 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
大学生个人自荐信
2014/02/24 职场文书
中介业务员岗位职责
2014/04/09 职场文书
爱心倡议书范文
2014/05/12 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
投标承诺函范文
2015/01/21 职场文书
检讨书怎么写
2015/01/23 职场文书
党支部评议意见
2015/06/02 职场文书
人与自然观后感
2015/06/16 职场文书
同事欢送会致辞
2015/07/31 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python