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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
基于vue实现分页效果
Nov 06 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
再论Javascript的类继承
2011/03/05 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
js绘制一条直线并旋转45度
2020/08/21 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
Python中的闭包总结
2014/09/18 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
护士毕业自我鉴定
2014/02/07 职场文书
服务标兵事迹材料
2014/05/04 职场文书
司法局火灾防控方案
2014/06/05 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
试用期自我评价范文
2015/03/10 职场文书
2016年春节慰问信息
2015/03/25 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
Redis的字符串是如何实现的
2021/10/24 Redis
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle