首页 > 代码库 > [JS] 四角度旋转特效

[JS] 四角度旋转特效

<!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="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <span class="front-face"></span>
                        <span class="back-face"></span>
                    </a>
                </li>
                <li>
                    <a href="http://www.mamicode.com/#">
                        <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="http://www.mamicode.com/#">                                    <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.模块化,可插拔式开发
-->

 

[JS] 四角度旋转特效