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 Date自定义函数 延迟脚本执行
Mar 10 Javascript
原生js写的放大镜效果
Aug 22 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
mysql 字段类型说明
2007/04/27 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php 使用array函数实现分页
2015/02/13 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
jQuery链使用指南
2015/01/20 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
Django中使用group_by的方法
2015/05/26 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
nohup的用法
2014/08/10 面试题
开办加工厂创业计划书
2014/01/03 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android