原生JS实现图片翻转旋转效果

来源：互联网发布：论文数据研究方法编辑：程序博客网时间：2024/05/17 23:57
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        #imgWrap{            width: 800px;            height:400px;            margin:80px auto;            perspective:800px;        }        #imgWrap img{            float: left;            height:80px;            width: 80px;        }        #btn{            width:100px;            text-align: center;            font:16px/40px Arial,Verdana;            color:#fff;            padding:0 20px;            background:rgb(0,100,0);            margin:0 auto;            border-radius:5px;            cursor: pointer;            box-shadow:2px 2px 5px rgba(0,0,0,0.5);        }    </style>    <script type="text/javascript">    /*     *  1.闪烁效果（瞬间将宽高都变为0，scale，并且是随机的）     *  2.图片从小到大，同时透明度从1变成0（必须是当前图片上一步效果走完了，才会开始）     *  3.图片旋转，同时透明度从0变成1，有层次感（位移translate）（当所有图片透明度都变为0的时候，才会开始）     */     window.onload=function(){        var btn=document.getElementById('btn');        var imgs=document.querySelectorAll('img');        var allEnd=0;//用来判断所有的图片是否都完成了所有的运动步骤        var on=true;//用来决定用户是否可以再次点击        //给btn添加点击事件        btn.onclick=function(){            console.log("on:"+on);            if(!on){                return;            }            on=false;            var endNum=0;//运动完成的图片数量            for(var i=0;i<imgs.length;i++){                //写成自执行函数的原因：for循环速度很快，将会导致setTimeout中的i找不到值                (function(i){                    setTimeout(function(){                        montion(imgs[i],'10ms',function(){                            this.style.transform='scale(0)';//因为函数用了call函数，所以可以用this，否则只能用imgs[i]                        },function(){                            //第二步的运动从这里开始                            montion(this,'1s',function(){                                this.style.transform="scale(1)";                                this.style.opacity=0;                            },function(){                                endNum++;//只要有一张图片完成了第二步，则加1                                if(endNum===imgs.length){                                    toBig();                                }                            })                        });                    },Math.random()*1000);                })(i);            }            //定时器，用来延迟时间，不让图片同步所放        };        //第三个运动效果        function toBig(){            /*             *坐标轴，x,y,z             */             for(var i=0;i<imgs.length;i++){                imgs[i].style.transition='';                // imgs[i].style.opacity='1';                //想要一个物体有css3中的动作变化，那就需要给它一个初始值                imgs[i].style.transform='rotateY(0deg) translateZ(-'+Math.random()*500+'px)';                //自执行函数的目的是，为了找到i，否则for循环执行太快，会找不到i                (function(i){                    setTimeout(function(){                        montion(imgs[i],'2s',function(){                            this.style.opacity=1;                            this.style.transform='rotateY(-360deg) translateZ(0)'                        },function(){                            allEnd++;                            if(allEnd===imgs.length){                                console.log("allEnd:"+allEnd+',imgs.length:'+imgs.length);                                //这个条件成立，说明所有的图片都运动完了，接下来才允许再次点击                                //当所有运动完了以后，才允许再次点击                                on=true;                                allEnd=0;                            }                        });                    },Math.random()*1000);                })(i);             }        }        //运动函数(运动的对象，运动的时间，运动的属性函数，运动完成后要做的事情)        function montion(obj,time,doFn,callBack){            obj.style.transition=time;            doFn.call(obj);//调用函数，并且把this的指向给obj            var called=false;//这里的原因是为了解决transitionend调用多次的bug            obj.addEventListener('transitionend',function(){                if(!called){                    callBack&&callBack.call(obj);//解决如果没有传入第四个callBack参数的问题                    called=true;                }            },false);//事件三阶段，第三个参数决定是在捕获阶段还是冒泡阶段，调用此函数,false代表是在冒泡阶段        }     }    </script></head><body>    <div id="imgWrap">        <img src="images/1.jpg" alt="">        <img src="images/2.jpg" alt="">        <img src="images/3.jpg" alt="">        <img src="images/4.jpg" alt="">        <img src="images/5.jpg" alt="">        <img src="images/6.jpg" alt="">        <img src="images/7.jpg" alt="">        <img src="images/8.jpg" alt="">        <img src="images/9.jpg" alt="">        <img src="images/10.jpg" alt="">        <img src="images/11.jpg" alt="">        <img src="images/12.jpg" alt="">        <img src="images/13.jpg" alt="">        <img src="images/14.jpg" alt="">        <img src="images/15.jpg" alt="">        <img src="images/16.jpg" alt="">        <img src="images/17.jpg" alt="">        <img src="images/18.jpg" alt="">        <img src="images/19.jpg" alt="">        <img src="images/20.jpg" alt="">        <img src="images/21.jpg" alt="">        <img src="images/22.jpg" alt="">        <img src="images/23.jpg" alt="">        <img src="images/24.jpg" alt="">        <img src="images/25.jpg" alt="">        <img src="images/26.jpg" alt="">        <img src="images/27.jpg" alt="">        <img src="images/28.jpg" alt="">        <img src="images/29.jpg" alt="">        <img src="images/30.jpg" alt="">        <img src="images/31.jpg" alt="">        <img src="images/32.jpg" alt="">        <img src="images/33.jpg" alt="">        <img src="images/34.jpg" alt="">        <img src="images/35.jpg" alt="">        <img src="images/36.jpg" alt="">        <img src="images/37.jpg" alt="">        <img src="images/38.jpg" alt="">        <img src="images/39.jpg" alt="">        <img src="images/40.jpg" alt="">        <img src="images/41.jpg" alt="">        <img src="images/42.jpg" alt="">        <img src="images/43.jpg" alt="">        <img src="images/44.jpg" alt="">        <img src="images/45.jpg" alt="">        <img src="images/46.jpg" alt="">        <img src="images/47.jpg" alt="">        <img src="images/48.jpg" alt="">        <img src="images/49.jpg" alt="">        <img src="images/50.jpg" alt="">    </div>    <div id="btn">点击查看效果</div></body></html>
0 0