不浮夸且不单调——监听鼠标图片移动动画
鼠标监听实现图片动画
这是一个小的动画，监听鼠标的移动，来实现 图片的移动视觉特效。虽然功能不是那么的强大，但应用范围还是很广泛的，不浮夸且不是单调。
先给大家欣赏一下样式。
小样子
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移动图片</title>
<style>
body {
margin: 0;
background-image: url(img/beijing.jpg);
}
#wrap {
width: 100%;
height: 800px;
margin: 30px auto;
position: relative;
}
#wrap img {
position: absolute;
}
#wrap img:nth-of-type(1){
width: 200px;
height: 300px;
left: 300px;
top: 30px;
z-index: 0;
}
#wrap img:nth-of-type(2){
width: 150px;
height: 200px;
left: 200px;
top: 300px;
z-index: 1;
}
#wrap img:nth-of-type(3){
width: 150px;
height: 190px;
right: 100px;
top: 50px;
z-index:2;
}
#wrap img:nth-of-type(4){
width: 200px;
height: 200px;
left: 400px;
top: 30px;
z-index: 3;
}
#wrap img:nth-of-type(5){
width: 200px;
height: 200px;
right: 500px;
top: 70px;
z-index: 4;
}
#wrap img:nth-of-type(6){
width: 200px;
height: 200px;
right: 200px;
top: 200px;
z-index: 5;
}
#wrap img:nth-of-type(7){
width: 400px;
height: 400px;
right: 35%;
top: 200px;
z-index: 6;
}
</style>
</head>
<body>
<div id="wrap">
<img src="img/图像(2).png"/>
<img src="img/图像(3).png"/>
<img src="img/dada_man_ray_skulptur_cadeau_01.gif"/>
<img src="img/图像(5).png"/>
<img src="img/图像(6).png"/>
<img src="img/capture_decran_2016_03_16_a_151542.jpg"/>
<img src="img/图像(8).png"/>
</div>
<script>
var oWrap = document.getElementById("wrap");
var aImg = oWrap.getElementsByTagName("img");
var iMax = 7;
//获取图片的初始位置
for(var i = 0; i < aImg.length; i++) {
aImg[i].startX = parseInt(getStyle(aImg[i], 'left'))
}
oWrap.onmousemove = function(ev) {
ev = ev || window.event;
//获取鼠标的位置与div中心点位置的距离
var Yd = ev.clientX - (oWrap.offsetLeft + this.offsetWidth / 5)
for(var i = 0; i < aImg.length; i++) {
//获取每个img的z-index
var iZindex = getStyle(aImg[i], 'zIndex')
//Zindex越大移动的相对距离越小
var iDisL = -parseInt(Yd / iMax * (iMax - iZindex) / 20)
//图片的距离等于原先的距离加上计算的距离
aImg[i].style.left = aImg[i].startX + iDisL + 'px'
}
}
function getStyle(obj, attr) {
if(obj.currentStyle) {
//IE浏览器
return obj.currentStyle[attr];
}
return getComputedStyle(obj)[attr];
}
</script>
</body>
</html>
复制代码后记得更改一下图片，我设置的是监听#wrap范围的鼠标，只是监听x轴的，大家可以研究添加y轴的监听移动。
