在看阿里云时看见一个“特效”很好玩,当鼠标移动时,图片也跟着移动,所以就想试一式
我们需要用到的就是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啦!