时间：2021-07-01 10:21:17 帮助过：5人阅读
理解缓动动画的原理
<!DOCTYPE html>
<!--create by ydj on 2018-08-12-->
<html>
<head>
<meta charset="UTF-8">
<title>筋斗云</title>
<style>
*{margin: 0; padding: 0;}
ul {list-style:none;}
body {
background-color: #000;
}
.nav {
width: 800px;
height: 42px;
background:url("images/rss.png") no-repeat right center #fff;
margin: 100px auto;
border-radius: 5px;
position: relative;
}
.cloud {
width: 83px;
height: 42px;
position: absolute;
top: 0;
left: 0;
background: url("images/cloud.gif") no-repeat;
}
.nav ul {
position: absolute;
top: 0;
left: 0;
}
.nav li {
float: left;
width: 83px;
height: 42px;
line-height: 42px;
text-align: center;
color: #000;
cursor: pointer;
}
</style>
</head>
<body>
<p class="nav" id="nav">
<span class="cloud" id="cloud"></span>
<ul>
<li>AI数据中心</li>
<li>财务中心</li>
<li>事业中心</li>
<li>陆兵学院</li>
<li>供应中心</li>
<li>总经办</li>
<li>品牌中心</li>
<li>人力中心</li>
</ul>
</p>
</body>
</html>
<script>
// 获取元素
var cloud = document.getElementById("cloud");
var nav = document.getElementById("nav");
var lis = nav.children[1].children;
// 记录点击时的位置
var current = 0;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function(){
target = this.offsetLeft;
}
lis[i].onclick = function(){
current = this.offsetLeft;
}
lis[i].onmouseout = function(){
target = current;
}
}
// 缓动动画
var leader = 0,target =0;
setInterval(function(){
leader = leader + (target -leader)/10;
cloud.style.left = leader + "px";
},10);
</script>效果
相关推荐：
怎么用css和js让页面文字出现不停闪烁的效果？（示例）
Ajax上传文件同时显示文件上传过程进度条的代码
以上就是js特效：js实现筋斗云的效果代码的详细内容，更多请关注Gxl网其它相关文章！
