借助tween.js小球沿div四边跑的动画效果
2024-08-31 13:57:12
<!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>
最新文章
- 关于ORACLE隐式转换后性能问题
- C# String.Format
- Linux文件目录结构说明
- Demo学习: ClientInfo
- 一次失败的刷题经历:[LeetCode]292之尼姆游戏(Nim Game)(转)
- location的使用
- [ERROR] Fatal error: Can&#39;t open and lock privilege tables: Table &#39;mysql.user&#39; doesn&#39;t exist 160913 02:11:21 mysqld_safe mysqld from pid file /tmp/mysql.pid ended
- 第一章 开发简单Java应用程序
- C#之概述
- maven私服nexus清理释放磁盘空间
- Python开发【内置模块篇】os模块
- How to DUMP the vba code protected by Unviewable+ VBA?
- 10、jeecg 默认为空的字段值是如何被填充的?
- SpringMvc父子容器
- 自定义控件详解(三):Canvas效果变换
- WARN bzip2.Bzip2Factory: Failed to load/initialize native-bzip2 library system-native, will use pure-Java version
- 『Python』skimage图像处理_旋转图像
- SVM 的推导、特点、优缺点、多分类问题及应用
- 教你小三角,适用移动端等,解决移动端a标签的默认样式
- [洛谷P2057][SHOI2007]善意的投票
热门文章
- 【前端】CentOS 7 系列教程之二: 安装 git 最新版
- bzoj1222
- 父窗口与iFrame之间调用方法和元素
- PTA 朋友圈【并查集的合并问题】
- poj 1988 Cube Stacking【带权并查集】
- bzoj 1207: [HNOI2004]打鼹鼠【dp】
- 前端笔记之React(二)组件内部State&;React实战&;表单元素的受控
- 洛谷 P1339 [USACO09OCT]热浪Heat Wave
- Window下完全卸载删除Nodejs
- 洛谷 P2841 A*B Problem