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 相关文章推荐
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
js格式化时间小结
Nov 03 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue filters的使用详解
Jun 11 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
原生微信小程序开发中 redux 的使用详解
Feb 18 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP实现统计在线人数功能示例
2016/10/15 PHP
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
PyMongo安装使用笔记
2015/04/27 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
常用的10个Python实用小技巧
2020/08/10 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
兼职业务员岗位职责
2014/01/01 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
答谢会策划方案
2014/05/12 职场文书
企业员工集体活动方案
2014/08/17 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
Java中的随机数Random
2022/03/17 Java/Android
Redis高并发缓存架构性能优化
2022/05/15 Redis