妙味css3课程---4-5、纯js如何做扇形导航

妙味css3课程---4-5、纯js如何做扇形导航

一、总结

一句话总结：

 

1、aImg[i].style.transition="0.5s "+i*100+"ms";是什么意思？

前一个0.5s是动画持续时间，后一个事件是延迟事件

 

2、如果页面第一次的动画没有transition效果，而后面的都有，应该怎么办？

检查元素，把后面让它有transition效果的样式放在标签里面，那么第一次就有了

 33     <div id="menu_list">
 34         <img style="transition: 0.5s 300ms; left: 0px; top: 0px; transform: scale(1) rotate(0deg);" src="a1.png" alt="">
 35         <img style="transition: 0.5s 300ms; left: 0px; top: 0px; transform: scale(1) rotate(0deg);" src="a2.png" alt="">
 36         <img style="transition: 0.5s 300ms; left: 0px; top: 0px; transform: scale(1) rotate(0deg);" src="a3.png" alt="">
 37         <img style="transition: 0.5s 300ms; left: 0px; top: 0px; transform: scale(1) rotate(0deg);" src="a4.png" alt="">
 38         <img style="transition: 0.5s 300ms; left: 0px; top: 0px; transform: scale(1) rotate(0deg);" src="a5.png" alt="">
 39     </div>

 

3、js中getElement支持链式操作么？

支持的

 48     var aImg=document.getElementById("menu_list").getElementsByTagName("img");

 

4、后面的transform样式会覆盖前面的transform样式，我们应该怎么做才能 让它不覆盖？

在transform里面，两个都给他加上

 55             this.style.transform="scale(2) rotate(-720deg)";

 

5、如何给渐变添加延迟效果？

transition的第二个时间参数

 74                 aImg[i].style.transition="0.5s "+i*100+"ms";

 

6、如何从正向的延迟效果变成反向的延迟效果？

用个数减去i来乘以延迟事件单位

 83                 aImg[i].style.transition="0.5s "+(aImg.length-i-1)*100+"ms";

 

7、两次点击，图一去一来，怎么实现（很像之前toggle的用法）？

用一个boolean变量，每运行一次的取反

 49     var bOff=true;

 

 68     oHome.onclick=function(){
 69         if (bOff) {
 70             this.style.transform="rotate(-360deg)";
 71             this.style.transition="0.5s";
 72             for(var i=0;i<aImg.length;i++){
 73                 var oLt=toLT(iR,90/4*i);
 74                 aImg[i].style.transition="0.5s "+i*100+"ms";
 75                 aImg[i].style.left=oLt.l+"px";
 76                 aImg[i].style.top=oLt.t+"px";
 77                 aImg[i].style.transform="scale(1) rotate(-720deg)";
 78             }
 79         }else{
 80             this.style.transition="0.5s";
 81             this.style.transform="rotate(0deg)";
 82             for(var i=0;i<aImg.length;i++){
 83                 aImg[i].style.transition="0.5s "+(aImg.length-i-1)*100+"ms";
 84                 aImg[i].style.left=0+"px";
 85                 aImg[i].style.top=0+"px";
 86                 aImg[i].style.transform="scale(1) rotate(0deg)";
 87             }
 88         }
 89         bOff=!bOff;
 90     }

 

8、js函数返回的事件如何返回json对象？

大括号，逗号，冒号的组合

 91     function toLT(iR,iDeg){
 92         var iLeft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
 93         var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
 94         return {l:iLeft,t:iTop};
 95     }

 

9、如何把图按扇形排放？

求出每个的偏移，循环来弄

 72             for(var i=0;i<aImg.length;i++){
 73                 var oLt=toLT(iR,90/4*i);
 74                 aImg[i].style.transition="0.5s "+i*100+"ms";
 75                 aImg[i].style.left=oLt.l+"px";
 76                 aImg[i].style.top=oLt.t+"px";
 77                 aImg[i].style.transform="scale(1) rotate(-720deg)";
 78             }

 91     function toLT(iR,iDeg){
 92         var iLeft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
 93         var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
 94         return {l:iLeft,t:iTop};
 95     }

 

10、如何结束transition效果？

transitionend属性

 96     function addEnd(obj,fn){
 97         obj.addEventListener('transitionend',fn,false);
 98     }

 

11、如何移除transition效果？

removeEventListener后面加transitionend

 99     function removeEnd(obj,fn){
100         obj.removeEventListener('transitionend',fn,false);
101     }

 

12、如何图片点击的后面终止transition效果？

 51     //图片点击事件
 52     for(var i=0;i<aImg.length;i++){
 53         aImg[i].onclick=function(){
 54             this.style.transition="0.3s";
 55             this.style.transform="scale(2) rotate(-720deg)";
 56             this.style.opacity="0.1";
 57             addEnd(this,end)
 58         }
 59     }
 60 
 61     function end(){
 62         this.style.transition="0.1s";
 63         this.style.transform="scale(1) rotate(-720deg)";
 64         this.style.opacity="1";
 65         removeEnd(this)
 66     }

 

 

 

二、纯js如何做扇形导航

1、截图

 

2、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #menu_list{
        position: absolute;
        bottom: 25px;
        right: 25px;
        width: 50px;
        height:50px;
    }

    #menu_list img{
        width: 50px;
        height: 50px;
        border-radius: 50px;
        position: absolute;
    }
    #home{
        width: 50px;
        height: 50px;
        border-radius: 50px;
        position: fixed;
        bottom: 25px;
        right: 25px;
        /*display: none;*/
    }
    </style>
</head>
<body>
    <div id="menu_list">
        <img style="transition: 0.5s 300ms; left: 0px; top: 0px; transform: scale(1) rotate(0deg);" src="a1.png" alt="">
        <img style="transition: 0.5s 300ms; left: 0px; top: 0px; transform: scale(1) rotate(0deg);" src="a2.png" alt="">
        <img style="transition: 0.5s 300ms; left: 0px; top: 0px; transform: scale(1) rotate(0deg);" src="a3.png" alt="">
        <img style="transition: 0.5s 300ms; left: 0px; top: 0px; transform: scale(1) rotate(0deg);" src="a4.png" alt="">
        <img style="transition: 0.5s 300ms; left: 0px; top: 0px; transform: scale(1) rotate(0deg);" src="a5.png" alt="">
    </div>
    <div >
        <img id="home" src="home.png" alt="">
    </div>
</body>
<script>

window.onload=function(){
    var oHome=document.getElementById("home");
    var aImg=document.getElementById("menu_list").getElementsByTagName("img");
    var bOff=true;
    var iR=-150;
    //图片点击事件
    for(var i=0;i<aImg.length;i++){
        aImg[i].onclick=function(){
            this.style.transition="0.3s";
            this.style.transform="scale(2) rotate(-720deg)";
            this.style.opacity="0.1";
            addEnd(this,end)
        }
    }

    function end(){
        this.style.transition="0.1s";
        this.style.transform="scale(1) rotate(-720deg)";
        this.style.opacity="1";
        removeEnd(this)
    }

    oHome.onclick=function(){
        if (bOff) {
            this.style.transform="rotate(-360deg)";
            this.style.transition="0.5s";
            for(var i=0;i<aImg.length;i++){
                var oLt=toLT(iR,90/4*i);
                aImg[i].style.transition="0.5s "+i*100+"ms";
                aImg[i].style.left=oLt.l+"px";
                aImg[i].style.top=oLt.t+"px";
                aImg[i].style.transform="scale(1) rotate(-720deg)";
            }
        }else{
            this.style.transition="0.5s";
            this.style.transform="rotate(0deg)";
            for(var i=0;i<aImg.length;i++){
                aImg[i].style.transition="0.5s "+(aImg.length-i-1)*100+"ms";
                aImg[i].style.left=0+"px";
                aImg[i].style.top=0+"px";
                aImg[i].style.transform="scale(1) rotate(0deg)";
            }
        }
        bOff=!bOff;
    }
    function toLT(iR,iDeg){
        var iLeft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
        var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
        return {l:iLeft,t:iTop};
    }
    function addEnd(obj,fn){
        obj.addEventListener('transitionend',fn,false);
    }
    function removeEnd(obj,fn){
        obj.removeEventListener('transitionend',fn,false);
    }

}
</script>
</html>