一.鼠标事件小例子:
CSS部分:
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrap{
width:180px;
height:180px;
background:red;
position:absolute;
}
</style>
JS部分:
<script type="text/javascript">
var wrap=document.getElementById('wrap');
//1.按住
//2.移动
//注意:事件响应必须在标签范围内才可以响应
wrap.onmousedown=function(e)
{
var myev=e||window.event;
//offsetX和offsetY相对于自身而言
var currentX=myev.offsetX;
var currentY=myev.offsetY;
//移动操作要在标签内部才可以起作用
document.onmousemove=function(e)
{
//需要获得鼠标移动的位置
var ev=e||window.event;
var x=ev.clientX;
var y=ev.clientY;
wrap.style.left=x-myev.offsetX+"px";
wrap.style.top=y-myev.offsetY+"px";
}
}
//抬起操作要在标签内部才可以起作用
document.onmouseup=function()
{
//将移动事件取消
document.onmousemove=null;
}
</script>