<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="description" content=""> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 1000px; height: 575px; border: 3px solid #ff00ff; margin: 150px auto; } #box ul li{ position: relative; float: left; margin-right: 32px; margin-bottom: 32px; list-style: none; width: 216px; height: 170px; background: #999999; overflow: hidden; } #box ul li a{ display: block; left: 0; top: 0; width: 100%; height: 100%; } #box ul li a span{ position: absolute; display: block; width: 100%; height: 100%; } .front-face{ background-image: url(img/pic1.jpg) ; z-index: 2; } .back-face{ background-image: url(img/pic2.jpg) ; z-index: 1; } /*从顶部*/ .from-top{ z-index: 3; transform-origin: 0% 0%; animation: from-top 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ } @-webkit-keyframes from-top{/*动画关键帧*/ from{/*一开始*/ z-index: 3; transform: rotate(-90deg); } to{/*结束*/ z-index: 3; transform: rotate(0deg); } } .to-top{ transform-origin: 0% 0%; animation: to-top 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ } @-webkit-keyframes to-top{/*动画关键帧*/ from{/*一开始*/ z-index: 3; transform: rotate(0deg); } to{/*结束*/ z-index: 3; transform: rotate(-90deg); } } .from-bottom{ z-index: 3; transform-origin: 100% 0%; animation: from-bottom 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ } @-webkit-keyframes from-bottom{/*动画关键帧*/ from{/*一开始*/ z-index: 3; transform: rotate(90deg); } to{/*结束*/ z-index: 3; transform: rotate(0deg); } } .to-bottom{ transform-origin: 100% 0%; animation: to-bottom 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ } @-webkit-keyframes to-bottom{/*动画关键帧*/ from{/*一开始*/ z-index: 3; transform: rotate(0deg); } to{/*结束*/ z-index: 3; transform: rotate(90deg); } } .from-left{ z-index: 3; transform-origin: 0% 100%; animation: from-left 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ } @-webkit-keyframes from-left{/*动画关键帧*/ from{/*一开始*/ z-index: 3; transform: rotate(90deg); } to{/*结束*/ z-index: 3; transform: rotate(0deg); } } .to-left{ transform-origin: 0% 100%; animation: to-left 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ } @-webkit-keyframes to-left{/*动画关键帧*/ from{/*一开始*/ z-index: 3; transform: rotate(0deg); } to{/*结束*/ z-index: 3; transform: rotate(-90deg); } } .from-right{ z-index: 3; transform-origin: 100% 100%; animation: from-right 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ } @-webkit-keyframes from-right{/*动画关键帧*/ from{/*一开始*/ z-index: 3; transform: rotate(90deg); } to{/*结束*/ z-index: 3; transform: rotate(0deg); } } .to-right{ transform-origin: 100% 100%; animation: to-right 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ } @-webkit-keyframes to-right{/*动画关键帧*/ from{/*一开始*/ z-index: 3; transform: rotate(0deg); } to{/*结束*/ z-index: 3; transform: rotate(90deg); } } </style> </head> <body> <div id="box"> <ul> <!-- 作者：871979853@qq.com 时间：2017-05-18 描述： <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li> <li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li>--> </ul> </div> </body> </html> <script> window.onload = function(){ var oBox = document.getElementById('box'); var oUl = oBox.getElementsByTagName('ul')[0]; var aLi = oBox.getElementsByTagName('li'); var span1 = document.getElementsByClassName('front-face'); var span2 = document.getElementsByClassName('back-face'); var numX = 4; var numY = 3; var liW = oBox.clientWidth/numX; var liH = oBox.clientHeight/numY; for(var i=0;i<numX*numY;i++){ oUl.innerHTML += '<li> <a href="#"> <span class="front-face"></span> <span class="back-face"></span> </a> </li>'; } //背景图片位置计算 for (var i=0;i<span1.length;i++) { i%=numX*numY; var iX = i%4; var iY = Math.floor(i/numX); span1[i].style.backgroundPosition =''+ (-liW*iX)+'px ' +(-liH*iY)+'px'; span2[i].style.backgroundPosition =''+ (-liW*iX)+'px ' +(-liH*iY)+'px'; } //鼠标滑入算法 for(var i=0;i<aLi.length;i++){ aLi[i].onmouseenter = function(e){ e = e||event; move.call(this,e,true);//call方法就是把this传入 } aLi[i].onmouseleave = function(e){ e = e||event; move.call(this,e,false); } } function move(e,boo){ e = e||event; var x = e.pageX; var y = e.pageY; var top = this.offsetTop; var bottom = top+this.clientHeight; var left = this.offsetLeft; var right = left + this.clientWidth; var sT = Math.abs(y-top); var sB = Math.abs(y-bottom); var sL = Math.abs(x-left); var sR = Math.abs(x-right); console.log(sT,sB,sL,sR); var a = Math.min(sT,sB,sL,sR); var target = this.children[0].children[1]; switch(a){ case sT: boo?target.className = 'back-face from-top':target.className = 'back-face to-top'; break; case sB: boo?target.className = 'back-face from-bottom':target.className = 'back-face to-bottom'; break; case sL: boo?target.className = 'back-face from-left':target.className = 'back-face to-left'; break; case sR: boo?target.className = 'back-face from-right':target.className = 'back-face to-right'; break; } } } </script> <!-- 描述：影响加载速度 性能 1.减少http请求 可以用精灵图 2.减少体积（字节数） 3.js代码：能封装的封装 能用css实现的动画不要用js 4.模块化，可插拔式开发 -->