js特效：js实现筋斗云的效果代码

来源：动视网责编：小采时间：2020-11-27 19:32:22

js特效：js实现筋斗云的效果代码

js特效：js实现筋斗云的效果代码:本篇文章给大家带来的内容是关于js特效：js实现筋斗云的效果代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。理解缓动动画的原理<!DOCTYPE html>  <html&

推荐度：

点击下载本文 文档为doc格式

导读js特效：js实现筋斗云的效果代码:本篇文章给大家带来的内容是关于js特效：js实现筋斗云的效果代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。理解缓动动画的原理<!DOCTYPE html>  <html&

本篇文章给大家带来的内容是关于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实现筋斗云的效果代码

推荐度：

点击下载本文 文档为doc格式

标签：特效实现 js

热门焦点

js特效：js实现筋斗云的效果代码

js特效：js实现筋斗云的效果代码

js特效：js实现筋斗云的效果代码

最新推荐

猜你喜欢

热门推荐