通过鼠标的移动让图片移动

在看阿里云时看见一个“特效”很好玩，当鼠标移动时，图片也跟着移动，所以就想试一式

我们需要用到的就是event对象，不了解的同学可以点击链接进去看看。

我们需要用到event对象中的

属性：onmousemove

鼠标事件：clientX & clientY (注意大写)

我写的比较简单，只是实现了简单的移动，实例如下：

HTML：

<div id="main">
<img src="imgs/lover01.JPEG"
alt="lover01" id="img"
width="100px" height="100px">
</div>

javascript:

function move(event) {
//获取坐标
var x = event.clientX;
var y = event.clientY;
//改变图片的位置，除以一个数可以让图片动得不那么夸张
document.getElementById("img").style.left = x/50 + "px";
document.getElementById("img").style.top = y/50 + "px";
}

css:

* {
width: 1000px;
height: 1000px;
}

#img {
position: relative;
/*当设置为absolute时，图片从流中消失，body会塌陷，可能会导致图片无法移动，但是给body设置宽高就OK了*/
width: 200px;
height: 200px;
}

#main {
border: 1px solid black;
}

这样就OK啦！