妙味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、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #menu_list{ 8 position: absolute; 9 bottom: 25px; 10 right: 25px; 11 width: 50px; 12 height:50px; 13 } 14 15 #menu_list img{ 16 width: 50px; 17 height: 50px; 18 border-radius: 50px; 19 position: absolute; 20 } 21 #home{ 22 width: 50px; 23 height: 50px; 24 border-radius: 50px; 25 position: fixed; 26 bottom: 25px; 27 right: 25px; 28 /*display: none;*/ 29 } 30 </style> 31 </head> 32 <body> 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> 40 <div > 41 <img id="home" src="home.png" alt=""> 42 </div> 43 </body> 44 <script> 45 46 window.onload=function(){ 47 var oHome=document.getElementById("home"); 48 var aImg=document.getElementById("menu_list").getElementsByTagName("img"); 49 var bOff=true; 50 var iR=-150; 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 } 67 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 } 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 } 96 function addEnd(obj,fn){ 97 obj.addEventListener('transitionend',fn,false); 98 } 99 function removeEnd(obj,fn){ 100 obj.removeEventListener('transitionend',fn,false); 101 } 102 103 } 104 </script> 105 </html>
1055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
