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

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

我们需要用到的就是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啦！