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

一、总结

一句话总结：

 

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

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

 

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

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

33     
    
      34 
      35 
      36 
      37 
      38 
      39 
    

 

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

 

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

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

 

 

 

二、纯js如何做扇形导航

1、截图

 

2、代码

1   2   3   4     
       5       6      31  32  33     
     
       34         
       35         
       36         
       37         
       38         
       39     
     
 40     
     
       41         
       42     
     
 43  44 105