html 鼠标控制div移动,js+html+css实现鼠标移动div实例

js：

复制代码 代码如下:

var posX;

var posY;

fdiv = document.getElementById("divBody");

document.getElementById("divHead").οnmοusedοwn=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：

复制代码 代码如下:

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;

}

时间： 2013-01-28