html的扇形代码导航,CSS3--利用transform和transition属性制作扇形导航

在前面，我们已经讲解了transform这个属性以及案例，那么本文会进一步结合transform和transition两个属性，并制作一个简单的案例进行说明。

一、transition属性说明

接下来简单分析一下transition这个属性的定义以及子属性。

1)ansition-property 要运动的样式 (all || [attr] || none)

2)transition-duration 运动时间

3)transition-delay 延迟时间

4)transition-timing-function 运动形式

ease：(逐渐变慢)默认值

linear：(匀速)

ease-in：(加速)

ease-out：(减速)

ease-in-out：(先加速后减速)

cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 ) http://matthewlein.com/ceaser/

[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法。

看一个简单的例子：

当鼠标经过div时，实现该div的颜色改变，以及高度和宽度都改变的效果。

实现代码：

transition

.box{

width:100px;

height:100px;

background-color: blue;

transition-duration: 2s;

/* 以下三值为默认值，稍后会详细介绍 */

transition-property: all;

transition-timing-function: ease;

transition-delay: 0s;

}

.box:hover{

width:200px;

height:200px;

background-color: red;

}

过渡transition的这四个子属性只有是必需值且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个是；当只有一个时间时，它是，而为默认值0。

transition: || || ||

transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。

二、案例：扇形导航

实现代码：

扇形导航

html{

height:100%;

overflow:hidden;

}

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;

}

#home{

width:50px;

height:50px;

background:url("images/home.png") no-repeat;

border-radius:25px;

position:absolute;

left:0;

top:0;

transition: 0.3s;

}

window.οnlοad= function () {

var oHome = document.getElementById("home");

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

var iRadius=-150;

var onOff = true;

for(var i = 0; i< aImg.length;i++){

aImg[i].οnclick= 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.οnclick=function(){

if (onOff){

this.style.webkitTransform="rotate(-360deg)";

for(var i = 0; i< aImg.length; i ++){

var oLt = getTL(iRadius,90/4*i);

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

aImg[i].style.left = oLt.oLeft+"px";

aImg[i].style.top = oLt.oTop+"px";

aImg[i].style.webkitTransform="scale(1) rotate(-720deg)";

}

}else{

this.style.webkitTransform="rotate(360deg)";

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)";

}

onOff=!onOff;

};

function getTL(iRadius,iDeg){

var oLeft = Math.round(Math.sin(iDeg/180*Math.PI)*iRadius);

var oTop = Math.round(Math.cos(iDeg/180*Math.PI)*iRadius);

return {oLeft:oLeft,oTop:oTop};

};

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);

};

案例说明：

1、案例中涉及两个点击事件，一个是点击主菜单时会进行旋转，并出现扇形导航，另外一个是点击扇形导航时会使导航图片变大。

(1)首先是点击主菜单：我们在点击主菜单的时候，图片会旋转，在这个中，我们使用了webkitTransform="rotate(-360deg)";这个属性就可以实现，在这个过程中要记得当鼠标反复点击后者点击结束后的事件效果。所以，我在其中设置了一个变量onOff进行判断，初始值为true，首先进行判断，如果为true就可旋转，相反的，为了达到更好的效果，这里设置了旋转360度，最后记得加上onOff=!onOff;，否则这个操作还是错误的，达不到我们想要的效果。