扇形导航

最新推荐文章于 2022-06-29 16:59:12 发布

abcd2144163

最新推荐文章于 2022-06-29 16:59:12 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haishen/p/7874376.html

版权

<body>
<div id="menu">
    <img src="img/prev.png" alt="" />
    <img src="img/open.png" alt="" />
    <img src="img/clos.png" alt="" />
    <img src="img/full.png" alt="" />
    <img src="img/refresh.png" alt="" />
    <div id="home"></div>
</div>
</body>

css代码：

body{
    background:#f9f9f9;
}
#menu{
    width:50px;
    height:50px;
    position:fixed;
    right:20px;
    bottom:20px;
}
#menu_list{
    height:42px;
    width:42px;
    position:relative;
    margin:4px;
}
#menu_list img{
    border-radius:21px;
    position:absolute;
    left:0;
    top:0;
    -webkit-transition:0.5s all ease;
}
#home{
    width:50px;
    height:50px;
    background:url(img/home.png) no-repeat;
    border-radius:25px;
    position:absolute;
    left:0;
    top:0;
    transition:1s;
}

javascript代码：

window.onload = function(){
    var oHome = document.getElementById("home");
    var aImg = document.getElementById("menu_list").getElementsByTagName("img");
    var iR = -150;
    for(var i=0;i<aImg.length;i++){
        aImg[i].onclick = function(){
            this.style.transition = "0.3s";
            this.style.WebkitTransform = "scale(2) rotate(-720deg)";
            this.style.opacity = 0.1;
            addEnd(this,end);
        };
   } 
    function end(){
        this.style.transition = "0.1s";
        this.style.WebkitTransform = "scale(1) rotate(-720deg)";
        this.style.opacity = 1;
        removeEnd(this,end);
    }

    oHome.onclick = function(){
        if(bOff){
            this.style.WebkitTransform = "rotate(-360deg)";
            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.WebkitTransform = "scale(1) rotate(-720deg)";
            }
        }else{
            this.style.WebkitTransform = "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.WebkitTransform = "scale(1) rotate(0deg)";
            }
        }
        bOff = !bOff;
    };
};

/*
    已知直角三角形的斜边长度和夹角，求对边（sin）和临边的长度
*/

function toLT(iR,iDeg){
    return {l:Math.round(Math.sin(iDeg/180*Math.PI)*iR),t:Math.round(Math.cos(iDeg/180*Math.PI)*iR)}
}

function addEnd(obj,fn){
    obj.addEventListener('WebkitTransitionEnd',fn,false);
    obj.addEventListener('transitionend',fn,false);
}
function removeEnd(obj,fn){
    obj.removeEventListener('WebkitTransitionEnd',fn,false);
    obj.removeEventListener('transitionend',fn.false);
}