<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自转</title>
<style>
*{
margin:0;
padding:0;
}
.ab{
width:0px;
height:0px;
background: #000;
position: absolute;
}
.move{
position: absolute;
width:80px;
height:80px;
background: #009FCC;
font-size: 20px;
text-align:center;
border:1.5px solid #000;
border-radius:40px;
color:#FFFFFF;
}
.move2{
position: absolute;
width:80px;
height:80px;
background: #FF0000;
font-size: 20px;
text-align:center;
border:1.5px solid #000;
border-radius:40px;
color:#FFFFFF;
}
.move3{
position: absolute;
width:80px;
height:80px;
background: #DDAA00;
font-size: 20px;
text-align:center;
border:1.5px solid #000;
border-radius:40px;
color:#FFFFFF;
}
.move4{
position: absolute;
width:80px;
height:80px;
background: #227700;
font-size: 20px;
text-align:center;
border:1.5px solid #000;
border-radius:40px;
color:#FFFFFF;
}
#img{
/*相对定位*/
position:relative;
transform:translate(630px,220px);
background: #AC07EB;
border-radius:60px;
width:120px;
height:120px;
font-size: 20px;
text-align:center;
border:1.5px solid #0EC0CF;
}
.earth{
background: url(espaco.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/
/*下面的属性可使地球位于浏览器窗口垂直水平居中国*/
height: 120px;
left: 50%;
margin: 260px 620px;
position: inherit;
top: 50%;
width: 120px;
text-align:center;
color: #FF0509;
font-size:24px;
font-weight: bold;
border: 1px solid rgba(26,18,101,0.3);
border-radius: 60px;
box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
-webkit-animation:loop 20s linear infinite;
}
.earth:before{
content:"";
border-radius: 60px;
margin: 260px 620px;
box-shadow: -50px -2px 26px rgba(0,0,0,0.7) inset;
left: 0;
position: inherit;
top: 0;
height: 120px;
width: 120px;
}
@-webkit-keyframes loop {
from { background-position: 0px 0%; }
to { background-position: -900px 0%;} }
.earth1{
background: url(espaco.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/
/*下面的属性可使地球位于浏览器窗口垂直水平居中国*/
height: 120px;
left: 50%;
margin: -100px 0 0 -100px;
position: absolute;
top: 50%;
width: 120px;
text-align:center;
color: #FF0509;
font-size:18px;
font-weight: bold;
border: 1px solid rgba(26,18,101,0.3);
border-radius: 100px;
box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
-webkit-animation:loop 20s linear infinite;
}
.earth2:before{
content: "";
border-radius: 100px;
box-shadow: -36px -6px 26px rgba(0,0,0,0.7) inset;
left: 0;
position: absolute;
top: 0;
height: 120px;
width: 120px;
}
@-webkit-keyframes loop {
from { background-position: 0px 0%; }
to { background-position: -900px 0%;} }
.earth2{
background: url(espaco.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/
/*下面的属性可使地球位于浏览器窗口垂直水平居中国*/
height: 120px;
left: 50%;
margin: -100px 0 0 -100px;
position: absolute;
top: 50%;
width: 120px;
text-align:center;
color: #FF0509;
font-size:18px;
font-weight: bold;
border: 1px solid rgba(26,18,101,0.3);
border-radius: 100px;
box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
-webkit-animation:loop 20s linear infinite;
}
.earth2:before{
content: "";
border-radius: 100px;
box-shadow: -36px -6px 26px rgba(0,0,0,0.7) inset;
left: 0;
position: absolute;
top: 0;
height: 120px;
width: 120px;
}
@-webkit-keyframes loop {
from { background-position: 0px 0%; }
to { background-position: -900px 0%;} }
.earth3{
background: url(espaco.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/
/*下面的属性可使地球位于浏览器窗口垂直水平居中国*/
height: 120px;
left: 50%;
margin: -100px 0 0 -100px;
position: absolute;
top: 50%;
width: 120px;
text-align:center;
color: #FF0509;
font-size:18px;
font-weight: bold;
border: 1px solid rgba(26,18,101,0.3);
border-radius: 100px;
box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
-webkit-animation:loop 20s linear infinite;
}
.earth3:before{
content: "";
border-radius: 100px;
box-shadow: -36px -6px 26px rgba(0,0,0,0.7) inset;
left: 0;
position: absolute;
top: 0;
height: 120px;
width: 120px;
}
@-webkit-keyframes loop {
from { background-position: 0px 0%; }
to { background-position: -900px 0%;} }
.earth4{
background: url(espaco.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/
/*下面的属性可使地球位于浏览器窗口垂直水平居中国*/
height: 120px;
left: 50%;
margin: -100px 0 0 -100px;
position: absolute;
top: 50%;
width: 120px;
text-align:center;
color: #FF0509;
font-size:18px;
font-weight: bold;
border: 1px solid rgba(26,18,101,0.3);
border-radius: 100px;
box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
-webkit-animation:loop 20s linear infinite;
}
.earth4:hover,
.earth1:hover,
.earth2:hover,
.earth3:hover
{
-webkit-animation:loop 0s linear infinite;
}
.earth4:before{
content: "";
border-radius: 100px;
box-shadow: -36px -6px 26px rgba(0,0,0,0.7) inset;
left: 0;
position: absolute;
top: 0;
height: 120px;
width: 120px;
}
</style>
</head>
<body>
<div class="earth">
<p>寰球</p>
<p>金融</p>
</div>
<div class="earth1">
<p> </p>
<p>基金</p>
<p>管理</p>
</div>
<div class="earth2">
<p> </p>
<p>投资</p>
<p>银行</p>
</div>
<div class="earth3">
<p> </p>
<p>全球</p>
<p>交易</p>
</div>
<div class="earth4">
<p> </p>
<p>战略</p>
<p>智库</p>
</div>
</body>
<script type="text/javascript">
var timer1, timer2, timer3, timer4;
var z = 0, z2 = 90, z3 = 180, z4 = 280;
var du = 360, du2 = 360, du3 = 360, du4 = 360;
var arr = [], arr2 = [], arr3 = [], arr4 = [];
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onmouseover = function () {
clearInterval(timer4);
clearInterval(timer3);
clearInterval(timer2);
clearInterval(timer1);
// divs[i].className = "";
// var style = document.getElementById("dynamic");
// style.innerHTML = '@-webkit-keyframes loop{ from { background-position: 0px 0%; } to {background-position: 0px 0%;} }';
// divs[1].style.transition = "-webkit-transform: loop 0s linear infinite";
}
//双击小球小事
divs[i].ondblclick = function () {
//此处写你要跳转到的代码
document.body.innerHTML = "";
document.body.innerHTML = "<center><h2>来呀来呀，小帅哥快来玩啊<h2></center>";
}
divs[i].onmouseout = function () {
var style = document.getElementById("dynamic");
//style.innerHTML = '@-webkit-keyframes loop {from { background-position: 0px 0%; }to { background-position: -900px 0%;}}';
timer1 = setInterval(function () {
if (z >= du) z = 0;
divs[1].style.cssText = "left:" + arr[z][0] + "px;top:" + arr[z][1] + "px;";
z++;
}, 40)
timer2 = setInterval(function () {
if (z2 >= du2) z2 = 0;
divs[2].style.cssText = "left:" + arr2[z2][0] + "px;top:" + arr2[z2][1] + "px;";
z2++;
}, 40)
timer3 = setInterval(function () {
if (z3 >= du3) z3 = 0;
divs[3].style.cssText = "left:" + arr3[z3][0] + "px;top:" + arr3[z3][1] + "px;";
z3++;
}, 40)
timer4 = setInterval(function () {
if (z4 >= du4) z4 = 0;
divs[4].style.cssText = "left:" + arr4[z4][0] + "px;top:" + arr4[z4][1] + "px;";
z4++;
}, 40)
}
}
(function () {
var x = 740, y = 380, a = 360, b = 200;
var go = document.querySelector(".earth1");
for (var i = 0; i <= du; i++) {
var divs = document.createElement("div")
hudu = (Math.PI / 180) * i,
x1 = a * Math.sin(hudu) + x,
y1 = y - (b * Math.cos(hudu));
arr[i] = [];
arr[i][0] = x1 - 2;
arr[i][1] = y1 - 2;
divs.className = "ab";
divs.style.cssText = "left:" + x1 + "px;top:" + y1 + "px;"
document.body.appendChild(divs);
};
clearInterval(timer1);
timer1 = setInterval(function () {
if (z >= du) z = 0;
go.style.cssText = "left:" + arr[z][0] + "px;top:" + arr[z][1] + "px;";
z++;
}, 40);
//绑定停止转动事件
})()
</script>
<script>
(function () {
var x = 740, y = 380, a = 360, b = 200;
var go = document.querySelector(".earth2");
for (var i = 0; i < du2; i++) {
var divs = document.createElement("div")
hudu = (Math.PI / 180) * i,
x1 = a * Math.sin(hudu) + x,
y1 = y - (b * Math.cos(hudu));
arr2[i] = [];
arr2[i][0] = x1 - 3;
arr2[i][1] = y1 - 3;
divs.className = "ab";
divs.style.cssText = "left:" + x1 + "px;top:" + y1 + "px;"
document.body.appendChild(divs);
};
clearInterval(timer2);
timer2 = setInterval(function () {
if (z2 >= du2) z2 = 0;
go.style.cssText = "left:" + arr2[z2][0] + "px;top:" + arr2[z2][1] + "px;";
z2++;
}, 40)
})()
</script>
<script>
(function () {
var x = 740, y = 380, a = 360, b = 200;
var go = document.querySelector(".earth3");
for (var i = 0; i < du3; i++) {
var divs = document.createElement("div")
hudu = (Math.PI / 180) * i,
x1 = a * Math.sin(hudu) + x,
y1 = y - (b * Math.cos(hudu));
arr3[i] = [];
arr3[i][0] = x1 - 2;
arr3[i][1] = y1 - 2;
divs.className = "ab";
divs.style.cssText = "left:" + x1 + "px;top:" + y1 + "px;"
document.body.appendChild(divs);
};
clearInterval(timer3);
timer3 = setInterval(function () {
if (z3 >= du3) z3 = 0;
go.style.cssText = "left:" + arr3[z3][0] + "px;top:" + arr3[z3][1] + "px;";
z3++;
}, 40)
})()
</script>
<script>
(function () {
var x = 740, y = 380, a = 360, b = 200;
var go = document.querySelector(".earth4");
for (var i = 0; i < du4; i++) {
var divs = document.createElement("div")
hudu = (Math.PI / 180) * i,
x1 = a * Math.sin(hudu) + x,
y1 = y - (b * Math.cos(hudu));
arr4[i] = [];
arr4[i][0] = x1 - 2;
arr4[i][1] = y1 - 2;
divs.className = "ab";
divs.style.cssText = "left:" + x1 + "px;top:" + y1 + "px;"
document.body.appendChild(divs);
};
clearInterval(timer4);
timer4 = setInterval(function () {
if (z4 >= du4) z4 = 0;
go.style.cssText = "left:" + arr4[z4][0] + "px;top:" + arr4[z4][1] + "px;";
z4++;
}, 40)
})()
</script>
</html>
