正文
借助tween.js小球沿div四边跑的动画效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0;
padding:0;
}
#wrap {
background-color:#0094ff;
height:600px;
width:600px;
}
#round {
height:100px;
width:100px;
background-color:#452692;
border-radius:50%;
position:absolute;
}
</style>
<script src="tween.js"></script>
</head>
<body>
<div id="wrap">
<div id="round"></div>
</div>
<script>
var round = document.getElementById("round");
function r() {
var t = 0;
var b = 0;
var c = 500;
var d = 2000;
var timer = setInterval(run, 20)
function run() {
t += 10;
if (t >= d) {
clearInterval(timer);
myfunction();
}
round.style.left =Tween.Bounce.easeInOut(t, b, c, d) + "px"; }
}
function myfunction() {
var t = 0;
var b = 0;
var c = 500;
var d = 2000;
var timer1 = setInterval(we, 20)
function we() {
t += 10;
if (t>=d) {
clearInterval(timer1);
myfunc();
}
round.style.top =Tween.Bounce.easeInOut(t, b, c, d) + "px";
}
}
function myfunc() {
var t = 0;
var b = 0;
var c = 500;
var d = 2000;
var timer2 = setInterval(we, 20)
function we() {
t += 10;
if (t >= d) {
clearInterval(timer2);
myfun();
}
round.style.left =c-Tween.Bounce.easeInOut(t, b, c, d) + "px";
}
}
function myfun() {
var t = 0;
var b = 0;
var c = 500;
var d = 2000;
var timer3 = setInterval(we, 20)
function we() {
t += 10;
if (t >= d) {
clearInterval(timer3);
r();
}
round.style.top =c-Tween.Bounce.easeInOut(t, b, c, d) + "px";
}
}r();
</script>
</body>
</html>
