筋斗云效果（云朵在导航栏内随着鼠标移动） 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{margin: 0; padding: 0;}
 8         ul {list-style:none;}
 9         body {
10             background-color: #000;
11         }
12         .nav {
13             width: 800px;
14             height: 42px;
15             background:url("images/rss.png") no-repeat right center #fff;
16             margin: 100px auto;
17             border-radius: 5px;
18             position: relative;
19         }
20         .cloud {
21             width: 83px;
22             height: 42px;
23             position: absolute;
24             top: 0;
25             left: 0;
26             background: url(images/cloud.gif) no-repeat;
27         }
28         .nav ul {
29             position: absolute;
30             top: 0;
31             left: 0;
32         }
33         .nav li {
34             float: left;
35             width: 83px;
36             height: 42px;
37             line-height: 42px;
38             text-align: center;
39             color: #000;
40             cursor: pointer;
41         }
42     </style>
43 </head>
44 <body>
45 <div class="nav" id="nav">
46     <span class="cloud" id="cloud"></span>
47     <ul>
48         <li>首页新闻</li>
49         <li>师资力量</li>
50         <li>活动策划</li>
51         <li>企业文化</li>
52         <li>招聘信息</li>
53         <li>公司简介</li>
54         <li>上海校区</li>
55         <li>广州校区</li>
56     </ul>
57 </div>
58 </body>
59 </html>
60 <script>
61     var cloud  = document.getElementById("cloud");  // 云彩
62     var nav = document.getElementById("nav");
63     var lis = nav.children[1].children;
64     var current = 0;   // 用于存放点击时候的 offsetLeft
65     //alert(lis.length);
66     // 2.循环遍历li
67     for(var i=0; i<lis.length;i++) {
68         lis[i].onmouseover = function() {
69             // alert(this.offsetLeft);
70             target = this.offsetLeft;  // 把左侧的位置 ，给 target
71         };
72         lis[i].onmouseout = function() {
73             target = current;     // 鼠标离开  target 是 刚才我们点击的位置
74         };
75         lis[i].onclick = function() {
76             current = this.offsetLeft;   //  点击的时候 吧当前位置 存贮一下
77         }
78     }
79     //1. 缓动公式开启定时器
80     var leader = 0, target = 0;
81     setInterval(function(){
82         leader = leader + (target - leader ) / 10;
83         cloud.style.left = leader + "px";
84     },10);
85 </script>

结构：   1.右边的信号是大盒子的背景图；

　　　　2.大盒子里面有一个云彩盒子，一个ul盒子；

　　　　3.云彩盒子的z-index降低；

　　　　　4.移动的盒子一般是通过定位得到的；

posted @ 2017-12-29 09:52  前端极客  阅读(1194)  评论(0)  编辑  收藏  举报