js+html+css实现鼠标移动div实例


Posted in Javascript onJanuary 30, 2013

js:

var posX; 
var posY; 
fdiv = document.getElementById("divBody"); 
document.getElementById("divHead").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"; 
}

html:
<div class="divBody" id="divBody" style="left: 29px; top: 14px;"> <!--这里要加style="left: 29px; top: 14px;" 否则有问题--> 
<div class="divHead" id="divHead" style="cursor: move;"> 
</div> 
<div class="content"> 
</div> 
<div class="tail"> 
</div> 
</div>

css:
.divBody{ 
//margin-top:20px; 
border: solid #CCC 1px; 
width:500px; 
height:400px; 
position:relative; 
z-index:0; 
margin-left:auto; 
margin-right:auto; 
} 
.divHead{ 
width:500px; 
height:50px; 
background-color:#CCC; 
} 
.content 
{ 
width:500px; 
height:300px; 
} 
.tail{ 
background:#CCC; 
height:50px; 
width:500px; 
display:table-cell; 
vertical-align:middle; 
}
Javascript 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
JS二维数组的定义说明
Mar 03 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 #Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 #Javascript
js判断样式className同时增加class或删除class
Jan 30 #Javascript
编写针对IE的JS代码两种编写方法
Jan 30 #Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 #Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 #Javascript
JavaScript起点(严格模式深度了解)
Jan 28 #Javascript
You might like
用PHP读取IMAP邮件
2006/10/09 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
python 实现任务管理清单案例
2020/04/25 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
高校自主招生自荐信
2013/12/09 职场文书
白酒业务员岗位职责
2013/12/27 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis