js+html+css实现鼠标移动div实例_Javascript教程-查字典教程网
js+html+css实现鼠标移动div实例
js+html+css实现鼠标移动div实例
发布时间:2016-12-30 来源:查字典编辑
摘要:js:复制代码代码如下:varposX;varposY;fdiv=document.getElementById("divBody");do...

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 id="divBody"> <>

<div id="divHead">

</div>

<div>

</div>

<div>

</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教程学习
    编程开发子分类