這篇文章帶給大家的內容是關於js特效：js實作筋斗雲的效果程式碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
理解緩動動畫的原理
<!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>效果
#相關推薦：
#以上是js特效：js實作筋斗雲的效果程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
