照片墙，html

最新推荐文章于 2024-08-19 17:35:32 发布

小保～

最新推荐文章于 2024-08-19 17:35:32 发布

阅读量226

点赞数 5

文章标签： css3 css html5

本文链接：https://blog.csdn.net/2301_76815028/article/details/140164419

版权

<!DOCTYPE html>
<html>
<head>

<audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" src="https://t4.kugou.com/song.html?id=9dUQXa1CNV2"></audio>
       <style type="text/css">
           #imgwrap{width: 880px;height: 300px;margin: 50px auto;perspective: 880px;}
           #imgwrap img{width:200px;height:200px;float: centre;}
           #btn{width: 100px;text-align: center;font: 16px/40px "微软雅黑";color: white;padding: 0 20px;
           margin:0 auto;border-radius:5px;background: rgb(163, 44, 125);box-shadow: 2px 2px 5px rgba(33, 119, 43, 0.5);cursor: pointer;}
           /*box-shadow(阴影): 2px(x) 2px(y) 5px(大小) rgba(0,0,0,0.5);*/
       </style>

<script type="module" src=""></script>
       <script type="text/javascript">

           window.οnlοad=function(){
               var btn=document.getElementById('btn');
               var imgs=document.querySelectorAll('img');
               var on=true;
               btn.οnclick=function(){
                   if(!on){
                       return;
                   }
                   on=false;
                   var endNum=0;       //运动完成的图片数量
                   var allEnd=0;       //用来判断所有的图片是否都运动完了
                   for(var i=0;i<imgs.length;i++){
                       (function(i){
                           setTimeout(function(){
                               montion(imgs[i],'10ms',function(){
                                   this.style.transform="scale(0)";   //缩放到0
                               },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);               //500毫秒
                       })(i)
                   }
                   function toBig(){
//                       这个函数用来做第三个效果
                       /*
                       * 坐标轴
                       * x轴（平行地面）
                       * y轴（垂直地面）
                       * x轴（垂直屏幕）
                       */
                       for(var i=0;i<imgs.length;i++){
                           imgs[i].style.transition="";
                           //想要一个物体有css3中的一些变化，那就需要给他一个初始值
                           imgs[i].style.transform='rotateY(0deg)translateZ(-'+Math.random()*500+'px)';
                           //用这种方式去写是因为想要在循环里找i的值
                           (function(i){
                               setTimeout(function(){
                                   montion(imgs[i],'2s',function(){
                                       this.style.opacity=1;
                                       this.style.transform='rotateY(-3600deg) translateZ(0)';
                                   },function(){
                                       allEnd++;
                                       if(allEnd==imgs.length){
                                           //这个条件成立，说明所有图片都运动完了，可以让用户再次点击了
                                           on=true;       //当所有运动完了以后才可以点
                                       }
                                   });
                               },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);
                                   called=true;
                               }
                           },false);
                       }
           };

       </script>
   </head>
   <body>
       <div id="imgwrap">

           <img src="https://www.keaitupian.cn/cjpic/frombd/2/253/2107631312/3178897554.jpg" >
           <img src="https://ts1.cn.mm.bing.net/th/id/R-C.b8e84a0907bf9b5128dfa48be0ae48af?rik=tfH6k%2fT3hkauqw&riu=http%3a%2f%2fwww.08lr.cn%2fuploads%2fallimg%2f220330%2f1-2300141M0.jpg&ehk=dR6hTo1o7lNsHkpE62oIzMtJ%2bmxktf7%2fx6tp3Zt2uB8%3d&risl=&pid=ImgRaw&r=0">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.0173a09b9c2ba6da89cfd89c492cae5b?rik=rmrp5VZYz2BTgQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f78%2f78_9.jpg&ehk=1T8b3FMg14%2bqrb1H9CaROVxQVIhp2vvDyfGbMjzzTKA%3d&risl=&pid=ImgRaw&r=0">
       </div>
       <div id="btn">
           点一下！
       </div>
   </body>

小保～

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
照片墙，html

font: 16px/40px "微软雅黑";//这个条件成立，说明所有图片都运动完了，可以让用户再次点击了。//当所有运动完了以后才可以点。/*box-shadow(阴影): 2px(x) 2px(y) 5px(大小) rgba(0,0,0,0.5);// 运动函数(运动的对象/运动的时间/运动的属性函数/运动完成后要做的事情)//用来判断所有的图片是否都运动完了。//运动完成的图片数量。
复制链接

扫一扫