使用CSS变形加js扇形导航

1.效果图

 

 

2.实现步骤，将所有图片通过定位重叠在一起，然后给需要弹出的图片加上过度动画。

3.上代码

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             *{
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             html,body{
 12                 height: 100%;
 13                 overflow: hidden;
 14             }
 15             #warp{
 16                 width: 50px;
 17                 height: 50px;
 18                 position: fixed;
 19                 right: 15px;
 20                 bottom: 15px;
 21             }
 22             #warp>.inner{
 23                 height: 100%;
 24             }
 25             #warp>.inner>img{
 26                 position: absolute;
 27                 left: 0px;
 28                 top: 0px;
 29                 margin: 4px;
 30                 border-radius: 50%;
 31             }
 32             #warp>.home{
 33                 width: 100%;
 34                 z-index: 999;
 35                 height: 100%;
 36                 background: url(img/home.png) no-repeat;
 37                 border-radius: 50%;
 38                 position: absolute;
 39                 top: 0;
 40                 left: 0;
 41                 transition: 1s;
 42             }
 43         </style>
 44     </head>
 45     <body>
 46         <div id="warp">
 47             <div class="inner">
 48                 <img src="img/clos.png" alt="" />
 49                 <img src="img/full.png" alt="" />
 50                 <img src="img/open.png" alt="" />
 51                 <img src="img/prev.png" alt="" />
 52                 <img src="img/refresh.png" alt="" />
 53             </div>
 54             <div class="home">
 55                 
 56             </div>
 57         </div>
 58     </body>
 59     <script type="text/javascript">
 60         /*    
 61          * transition 的坑
 62         1在元素首次渲染还没有完成的情况下,是不会触发过度的
 63         transform
 64         2在变换绝大部分变换函数中如果 变换函数的位置个数不相同也不好触发过度
 65         */
 66         
 67         window.onload=function(){
 68             var homeEle=document.querySelector(".home");
 69             var imgs=document.querySelectorAll("#warp>.inner>img");
 70             //菜单是否展开
 71             var flag=true;
 72             var c=140;
 73             /*第一步*/
 74             homeEle.onclick=function(){
 75                 if(flag){
 76                     this.style.transform="rotate(-720deg)";
 77                     for(var i=0;i<imgs.length;i++){
 78                         imgs[i].style.transition="0.8s "+(i*0.1)+"s"
 79                         imgs[i].style.left=-getPoint(c,90*i/(imgs.length-1)).x+"px";
 80                         imgs[i].style.top=-getPoint(c,90*i/(imgs.length-1)).y+"px";
 81                         imgs[i].style.transform="rotate(-360deg) scale(1)";
 82                     }
 83                     
 84                 }else{
 85                     this.style.transform="rotate(0deg)";
 86                     for(var i=0;i<imgs.length;i++){
 87                         imgs[i].style.transition="0.8s "+((imgs.length-i)*0.1)+"s"
 88                         imgs[i].style.left=0;
 89                         imgs[i].style.top=0;
 90                         imgs[i].style.transform="rotate(0deg) scale(1)";
 91                     }
 92                 }
 93                 flag=!flag;
 94             }
 95             
 96             /**
 97              * 计算位置
 98              */
 99             function getPoint(c,deg){
100                 var x=Math.round(c*Math.sin(deg*Math.PI/180));
101                 var y=Math.round(c*Math.cos(deg*Math.PI/180));
102                 return {x:x,y:y}
103             }
104             /*
105              * 第二步
106              */
107             function fn(){
108                 this.style.transform="rotate(-360deg) scale(1)";
109                 this.style.opacity=1;
110                 //解绑
111                 this.removeEventListener("transitionend");
112             }
113             for(var i=0;i<imgs.length;i++){
114                 //inner内 五张图片的 单机事件
115                 imgs[i].onclick=function(){
116                     this.style.transform="scale(2)";
117                     this.style.opacity=0.1;
118                     this.style.transition="0.7s";
119                     //绑定 transitionend结束后事件
120                     this.addEventListener("transitionend",fn)
121                 }
122                 
123             }
124         }
125         
126         
127     </script>
128 </html>

4。总结

transition属性在元素首次被渲染还没完成的情况下是不会被触发的 

　　比如说  1和2绑定的都是单击触发的变换事件，1 是变换到 x1点   b是变换到1原来的位置，当页面加载完成后，点击1变换到x1后，如果后续不执行b变换到原来的位置的话，1是只能单击一次的，之后在单击是没有效果的（个人理解，可能有点绕）

 transform在变换绝大部分变换函数中如果 变换函数的位置个数不相同也不会触发过度

posted @ 2020-03-12 02:03  花儿咋这红  阅读(410)  评论(0)    收藏  举报