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 相关文章推荐
js constructor的实际作用分析
Nov 15 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
微信小程序日历效果
Dec 29 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 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
PHP7多线程搭建教程
2017/04/21 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
vue组件与复用详解
2018/04/08 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python3实现点餐系统
2019/01/24 Python
Python 实现集合Set的示例
2020/12/21 Python
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
New delete 与malloc free 的联系与区别
2013/02/04 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
师德师风承诺书
2014/05/23 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
美容院管理规章制度
2015/08/05 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
pytorch 6 batch_train 批训练操作
2021/05/28 Python