【www.bbyears.com--网页配色】
html:
movebox
css
#boxmove{
position: absolute;
width: 200px;
border:1px solid #ccc;
height: 200px;
color: red;
background-color: blue;
text-align: center;
font-size: 30px;
}
js
var o, //捕获到的事件
X, //boxmove水平宽度
Y; //boxmove垂直高度
function getObject(obj,e){ //获取捕获到的对象
o = obj;
// document.all（IE）使用setCapture方法绑定；其余比如FF使用Window对象针对事件的捕捉
document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);
X = e.clientX - parseInt(o.style.left); //获取宽度，
Y = e.clientY - parseInt(o.style.top); //获取高度，
}
document.getElementById("boxmove").onmousedown = function(e){
getObject(this,e||event); //boxmove捕获事件并处理 e-->FF window.event-->IE
};
document.onmousemove = function(dis){ //鼠标移动事件处理
if(!o){
return;
}
if(!dis){ //事件
dis = event ;
}
o.style.left = dis.clientX - X +"px"; //设定boxmovebox样式随鼠标移动而改变
o.style.top = dis.clientY - Y + "px";
};
document.onmouseup = function(){ //鼠标松开事件处理
if(!o){
return;
}
// document.all（IE）使用releaseCapture解除绑定；其余比如FF使用window对象针对事件的捕捉
document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
o = ''; //还空对象
};需要注意的是，因为需要更改div的left和top。这两个属性需要以内联方式给出，否则不行。