<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
position: fixed;
right: 15px;
bottom: 15px;
50px;
height: 50px;
}
#wrap > #inner{
height: 100%;
}
#wrap > #inner>img{
position: absolute;
left: 0;
top: 0;
bottom: 4px;
border-radius: 50%;
}
#wrap > #home{
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: url(img/home.png) no-repeat;
border-radius: 50%;
height: 100%;
100%;
transition: 1s;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
<img src="img/clos.png" alt="" />
<img src="img/full.png" alt="" />
<img src="img/open.png" alt="" />
<img src="img/prev.png" alt="" />
<img src="img/refresh.png" alt="" />
</div>
<div id="home">
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.10.1.js" ></script>
<script>
var flag = true;
var c = 140
$(function(){
$imglist = $("#inner>img");
$("#home").click(function(){
if (flag) {
$(this).css("transform","rotate(-720deg)");
$imglist.each(function(i){
$(this).css('transition',"1s "+(i*0.1)+"s")
$(this).css('transform',"rotate(-720deg) scale(1)")
var left = -getPoint(c,90*i/($imglist.length-1)).left+"px"
var top = -getPoint(c,90*i/($imglist.length-1)).top+"px"
$(this).css('left',left)
$(this).css('top',top)
})
}
else{
$(this).css("transform","rotate(0deg)");
$imglist.each(function(i){
$(this).css('transition',"1s "+(($imglist.length-1-i)*0.1)+"s")
$(this).css('transform',"rotate(0deg) scale(1)")
$(this).css('left',"0px")
$(this).css('top',"0px")
})
}
flag = !flag;
})
//已知第三边 得到横纵坐标
function getPoint(c,deg){
var left = c*Math.sin(deg*Math.PI/180)
var top = c*Math.cos(deg*Math.PI/180)
return {left:left,top:top}
}
function fn(){
$(this).css("transition","1s");
$(this).css("transform","rotate(-720deg) scale(1)");
$(this).css("opacity","1");
$(this).off('transitionend',fn)
}
$imglist.each(function(i){
$(this).click(function(){
$(this).css("transition","0.5s");
$(this).css("transform","rotate(-720deg) scale(2)");
$(this).css("opacity","0.1");
//放大之后 实现了效果，然后要给每一个都赋予旋转，要不然的话，收回去的时候就没有了旋转的效果了
//transform个数和位置都要一样，所以都必须要有两个，要不然的话是不生效的。
$(this).on('transitionend',fn)
})
})
})
</script>
</html>