文档章节

JS实现拖动层(兼容大部分浏览器)

hefeiuu
 hefeiuu
发布于 2017/05/04 20:27
字数 180
阅读 4
收藏 0
一个比较好的js拖动层代码,发上来共享一下。
<!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=gb2312" />
<title>JS拖动层</title>
</head>

<body>
<div id="f" style="position: absolute; width: 200px; height: 150px; background-color: #ccc; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;">
  <div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 13px; 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>

本文转载自:http://ufopw.iteye.com/blog/355579

共有 人打赏支持
hefeiuu
粉丝 3
博文 64
码字总数 0
作品 0
合肥
IE6终极备忘:修复IE6下 25+ Bugs

作者: xcntime 发表于 2010-08-11 10:49 原文链接 阅读: 0 评论: 0 [译]IE6终极备忘:修复IE6下 25+ Bugs 2010年01月08日 | HTML/CSS, JavaScript 去年就想将IE的bug系统地整理下,但一直都忙...

xcntime
2010/08/16
0
0
40 个轻量级 JavaScript 库

流行的 JavaScript 库不胜枚举,jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富,加上它们的插件,几乎能胜任任何工作,然而这是有代价的,这些库往往导致你的网页尺寸...

晨曦之光
2012/03/09
0
0
从零开始学 Web 之 HTML(一)认识前端

大家好,这里是 Daotin 从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩...

fengdaoting
05/20
0
0
JX(Javascript eXtension tools - Javascript 扩展工具库)

JX(Javascript eXtension tools - Javascript 扩展工具库) 站在巨人的肩上 Standing on shoulders of giants 简介 JX 适用于 Web Page 和 Web App 的开发, 目前已经应用与WebQQ2.0和WebQQ3....

Enchanted
2012/03/24
0
0
想做web开发,就学JavaScript

原文出处:Tony Patton 译文出处:腊八粥 有一天我被问到,为了快速地在web开发工作上增加优势,应该学习什么语言。我的思绪回到了大学,那时候我用Pascal、Fortran、C和汇编语言,不过那个时...

Tony Patton
2014/12/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
46分钟前
1
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
1
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
3
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
2
0
20180921 su与sudo命令、限制root用户通过ssh远程登录

su 命令 用户切换。 su # 切换到root用户su username # 切换到username用户# su 后面加-时,会初始化当前用户的各种环境su - username # 指定用户执行某些命令 su - -c "touch /tm...

野雪球
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部