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 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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
自动分页的不完整解决方案
2007/01/12 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python自定义主从分布式架构实例分析
2016/09/19 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
篮球赛口号
2014/06/18 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
2015年端午节活动总结
2015/02/11 职场文书
通用员工手册范本
2015/05/14 职场文书