标签：
点击右下那个 会自动旋转展开其余子菜单
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#wrap {
width: 300px;height:300px;
margin: 200px auto;
position: relative;
}
#wrap img {
border-radius:50%;
position: absolute;
left: 251px;
top:251px;
}
#wrap img:nth-of-type(1) {
z-index: 2;
transition:1s;
}
</style>
</head>
<body>
<div id="wrap">
<img src="home.png" id="home">
<img src="open.png">
<img src="clos.png">
<img src="full.png">
<img src="prev.png">
<img src="refresh.png">
</div>
<script>
var wrap = document.getElementById(‘wrap‘);
var home = document.getElementById(‘home‘);
var imgs = wrap.getElementsByTagName(‘img‘);
var deg = Math.PI/8;
var btn = true;
home.onclick = function(){
if(btn){
this.style.webkitTransform = ‘rotate(360deg)‘;
for ( var i = 1; i < imgs.length; i++ ) {
imgs[i].style.transition ="0.5s "+i*100+"ms";
imgs[i].style.top = 300-Math.cos((i-1)*deg)*209-42+‘px‘;
imgs[i].style.left = 300-Math.sin((i-1)*deg)*209-42+‘px‘;
imgs[i].style.webkitTransform = ‘rotate(-720deg)‘;
}
} else {
this.style.webkitTransform = ‘rotate(0deg)‘;
for ( var i = 1; i < imgs.length; i++ ) {
imgs[i].style.transition ="0.5s "+i*100+"ms";
imgs[i].style.top = ‘251px‘;
imgs[i].style.left = ‘251px‘;
imgs[i].style.webkitTransform = ‘rotate(0deg)‘;
}
}
btn = !btn;
}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/xyf993/p/4975849.html
