扇形导航
圆形按钮，切换一系列图片导航的显示与隐藏。
如果涉及过渡动画，定位的 top 和 left 必须写
Math.sin(弧度)
- 一圈弧度 = 2π，一圈角度 = 360
- 弧度 = (deg*2π)/360 = (deg*π)/180
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>扇形导航</title> <style type="text/css"> body { width: 100%; color: #000; background: #96b377; font: 14px Helvetica, Arial, sans-serif; } /**** Corner Nav ****/ #corner_nav { position: fixed; bottom: 0px; right: 0px; width: 50px; height: 50px; padding: 1px 0 0 1px; background: #f000; } #corner_btn { position: absolute; top: 1px; left: 1px; z-index: 5; width: 49px; height: 49px; border-radius: 50%; background: url(./img/corner.png) no-repeat; transition: 1s all ease 0s; cursor: pointer; } #a_imgs { list-style: none; width: 42px; height: 42px; } #a_imgs img { display: block; border-radius: 50%; transition: 1s all ease 0s; opacity: 0.6; } #a_imgs li { position: absolute; top: 4px; left: 4px; } </style> </head> <body> <div id="corner_nav"> <div id="corner_btn"></div> <ul id="a_imgs"> <li class="aImgLi"><a href="javescript:;"><img src="./img/clos.png" /></a></li> <li class="aImgLi"><a href="javescript:;"><img src="./img/full.png" /></a></li> <li class="aImgLi"><a href="javescript:;"><img src="./img/open.png" /></a></li> <li class="aImgLi"><a href="javescript:;"><img src="./img/prev.png" /></a></li> <li class="aImgLi"><a href="javescript:;"><img src="./img/refresh.png" /></a></li> </ul> </div> <!-- javascript 代码 --> <script type="text/javascript"> var cornerBtn = document.getElementById("corner_btn"); var lis = document.querySelectorAll("li.aImgLi"); var navLength = 200; var isOpen = false; cornerBtn.onclick = function(){ if(isOpen){ // 收回 cornerBtn.style.transform = "rotate(0deg)"; for(i=0; i<lis.length; i++){ lis[i].style.transition = 0.5+"s "+0.1*(lis.length-1-i)+"s"; lis[i].style.left = 4+"px"; lis[i].style.top = 4 +"px"; lis[i].style.transform = "rotate(0deg)"; } }else{ // 释放 cornerBtn.style.transform = "rotate(-360deg)"; var i = 0; for(i=0; i<lis.length; i++){ lis[i].style.transition = 0.5+"s "+0.1*i+"s"; lis[i].style.left = -navLength*Math.sin( (90/(lis.length-1))*i*Math.PI/180 )+"px"; lis[i].style.top = -navLength*Math.cos( (90/(lis.length-1))*i*Math.PI/180 )+"px"; lis[i].style.transform = "rotate(-720deg)"; }; }; isOpen = !isOpen; }; // 点击按钮: 按钮放大，透明度为 1 var aImgs = document.getElementById("a_imgs"); aImgs.onclick = function(e){ e = e || window.event; var obj = e.target || e.srcElement; // 单独设置点击元素的样式: 透明度 放大 if(obj.nodeName == "IMG"){ obj.style.opacity = "1"; obj.style.transform = "scale(1.5)"; // 在过渡结束和，缩小到原来大小 // window.setTimeout(function(){ // obj.style.transform = "scale(1)"; // },1000); /**** transitionend 检测事件结束事件 必须是 DOM2 级事件绑定 ****/ /**** 1. 兼容性问题****/ obj.addEventListener('transitionend', styleBack); obj.addEventListener('webkitTransitionEnd', styleBack); // 小驼峰命名法 function styleBack(){ obj.style.transform = "scale(1)"; /**** 2. 解绑问题 PC 端流量不限量，无大影响 移动端必须解绑 省流量 因为事件存在，需要一定流量监控此事件， 且无关触发需要消耗流量执行 ****/ obj.removeEventListener('transitionend', styleBack); obj.removeEventListener('webkitTransitionEnd', styleBack); // 小驼峰命名法 }; }; }; // 鼠标离开，所有元素回到默认样式 aImgs.onmouseleave = function(){ var allImgs = document.getElementById("a_imgs").children; var i = 0; var theImg = null; for(i=0; i<allImgs.length; i++){ theImg = allImgs[i].getElementsByTagName("img")[0]; theImg.style.opacity = "0.6"; }; }; </script> </body> </html>