不浮夸且不单调——监听鼠标图片移动动画
Posted 骚楠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不浮夸且不单调——监听鼠标图片移动动画相关的知识，希望对你有一定的参考价值。
鼠标监听实现图片动画
这是一个小的动画，监听鼠标的移动，来实现 图片的移动视觉特效。虽然功能不是那么的强大，但应用范围还是很广泛的，不浮夸且不是单调。
先给大家欣赏一下样式。
小样子
代码：
<!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轴的监听移动。
以上是关于不浮夸且不单调——监听鼠标图片移动动画的主要内容，如果未能解决你的问题，请参考以下文章
分析一下CSS怎样实现该动画功能（鼠标放在图片上，图片向左移动）