html 代码
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 波浪运动
- </title>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
- </script>
- </head>
- <style>
- *{margin:0;padding:0;list-style:none;} img{border:none;} /*BFC - 块级作用域的上下问环境
- */ ul{ background: #ccc;float: left;/*overflow: hidden;*/} ul li{width:100px;height:100px;line-height:100px;text-align:
- center;float: left;margin:10px;border:5px dashed #00a4f0;position: relative;top:130px;/*
- 通过改变 top 值进行运动 */font-size: 20px;}
- </style>
- <body>
- <ul>
- <li>
- A
- </li>
- <li>
- B
- </li>
- <li>
- C
- </li>
- <li>
- D
- </li>
- <li>
- E
- </li>
- </ul>
- <script>
- $(function() {
- var $ul = $("ul");
- var $lis = $("li");
- function box(i) {
- var time, y = 120;
- function autoPlay() {
- y -= 10;
- if (y <= 0) {
- clearInterval(time);
- }
- $lis.eq(i).CSS("top", y + 'px');
- }
- time = setInterval(autoPlay, 100);
- }
- var step = 500,
- step1;
- for (let k = 0; k < $lis.length; k++) { //let 相当于 var, 区别在于 let: 超时自动调用指定的代码
- step1 = step * k; //0 500 1000 1500 2000
- setTimeout(function() {
- box(k)
- },
- step1); // 使用 let 解决闭包的缺陷 闭包: 函数嵌套函数
- }
- })
- </script>
- </body>
- </HTML>
注意: 不兼容 IE 内核 [color=#ff0000][/color]
setinterval settimeout
来源: http://www.qdfuns.com/article/28382/07f3fc538ffb6695c8c5b89d786e42ac.html