本篇文章给大家带来的内容是关于js特效：js实现筋斗云的效果代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

理解缓动动画的原理

html>
<!--create by ydj on 2018-08-12-->

	
		<meta><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><p>
			<span></span>
			</p>

• AI数据中心
• 财务中心
• 事业中心
• 陆兵学院
• 供应中心
• 总经办
• 品牌中心
• 人力中心

<script> //&nbsp;&#33719;&#21462;&#20803;&#32032; var&nbsp;cloud&nbsp;=&nbsp;document.getElementById("cloud"); var&nbsp;nav&nbsp;=&nbsp;document.getElementById("nav"); var&nbsp;lis&nbsp;=&nbsp;nav.children[1].children; //&nbsp;&#35760;&#24405;&#28857;&#20987;&#26102;&#30340;&#20301;&#32622; var&nbsp;current&nbsp;=&nbsp;0; for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;lis.length;&nbsp;i++)&nbsp;{ lis[i].onmouseover&nbsp;=&nbsp;function(){ target&nbsp;=&nbsp;this.offsetLeft; } lis[i].onclick&nbsp;=&nbsp;function(){ current&nbsp;=&nbsp;this.offsetLeft; } lis[i].onmouseout&nbsp;=&nbsp;function(){ target&nbsp;=&nbsp;current; } } //&nbsp;&#32531;&#21160;&#21160;&#30011; var&nbsp;leader&nbsp;=&nbsp;0,target&nbsp;=0; setInterval(function(){ leader&nbsp;=&nbsp;leader&nbsp;+&nbsp;(target&nbsp;-leader)/10; cloud.style.left&nbsp;=&nbsp;leader&nbsp;+&nbsp;"px"; },10); </script>

效果

相关推荐：

怎么用css和js让页面文字出现不停闪烁的效果？（示例）

Ajax上传文件同时显示文件上传过程进度条的代码