<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#warp{
height: 64px;
width: 64px;
position: fixed;
right: 15px;
bottom: 15px;
}
#warp > .inner{
height: 100%;
}
#warp > .inner > img{
position: absolute;
left:0;
top:0;
border-radius: 50%;
/* transition: 2s; */
}
#warp > .home{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
left:0;
top:0;
background: url("img/bfw.png") no-repeat;
border-radius: 50%;
transition: 1s;
}
</style>
<body>
<div id="warp">
<div class="inner">
<img src="img/hfw.png" alt="">
<img src="img/bmrc.png" alt="">
<img src="img/hyjy.png" alt="">
<img src="img/ldrc.png" alt="">
<img src="img/qb.png" alt="">
</div>
<div class="home"></div>
</div>
</body>
<script type="text/javascript">
// 1.在元素首次渲染还没有完成的情况下，是不会触发过渡的
// 2.在绝大部分变换样式切换时，如果变换函数位置、 个数不相同也不会触发过渡
// 勾股定理、三角函数、角度与弧度的转换
window.onload=function(){
var homeEle=document.querySelector(".home")
var imgs=document.querySelectorAll("#warp > .inner > img")
var flag=true,c=140
function fn(){
this.style.transition="0.3s "
this.style.transform="rotate(-720deg) scale(1) "
this.style.opacity="1"
this.removeEventListener("transitionend",fn)
}
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick=function(){
this.style.transition="0.5s "
this.style.transform="rotate(-720deg) scale(2)"
this.style.opacity="0.1"
this.addEventListener("transitionend",fn)
}
}
homeEle.onclick=function(){
if(flag){
this.style.transform="rotate(-720deg)"
for(i=0;i<imgs.length;i++){
imgs[i].style.transition="1s "+(i*.15)+"s"
imgs[i].style.transform="rotate(-720deg) scale(1)"
imgs[i].style.left=-getPoinet(c,90*i/(imgs.length-1)).left+"px";
imgs[i].style.top=-getPoinet(c,90*i/(imgs.length-1)).top+"px";
}
}else{
this.style.transform="rotate(0deg)"
for(i=0;i<imgs.length;i++){
imgs[i].style.transition="1s "+((imgs.length-1-i)*0.15)+"s" //动画时间，延时
imgs[i].style.transform="rotate(0deg) scale(1)" //旋转
imgs[i].style.left="0px";
imgs[i].style.top="0px";
}
}
flag=!flag
}
// 已知第三边和一个角
function getPoinet(c,deg){
var x=Math.round(c*Math.sin(deg*Math.PI/180))
var y=Math.round(c*Math.cos(deg*Math.PI/180))
return {left:x,top:y};
}
}
</script>
</html>
