js+html+css实现鼠标移动div实例
更新时间：2013年01月30日 18:05:15 作者：
移动div对于很多的网有们来说是一件很熟悉的事了，本文老生长谈，用js实现鼠标移动div，希望大伙们可以举一反三，感兴趣的朋友可以参考下，或许本文对你有所帮助
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;
}
复制代码 代码如下:
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;
}
相关文章
JS常用正则表达式总结。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要为大家详细介绍了JS实现网页烟花动画效果，点击鼠标烟花向四周扩散，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了JS自动生成动态HTML验证码页面，输入错误自动清空输入框的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本篇文章主要介绍了详解webpack进阶之loader篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了json实现添加、遍历与删除属性的方法,结合简单实例形式分析了json常见的添加、遍历与删除操作相关技巧,需要的朋友可以参考下2016-06-06
JavaScript error浏览器端错误捕获处理方法笔记解决示例
这篇文章主要为大家介绍了JavaScript error浏览器端错误捕获处理方法笔记解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了微信小程序 scroll-view 实现锚点跳转功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
今天小编就为大家分享一篇layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要给大家介绍了如何增强vscode中js代码提示功能的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
这篇文章主要介绍了webpack4之如何编写loader，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
最新评论