1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 }
11
12 div {
13 overflow: hidden;
14 border: 1px solid #ccc;
15 width: 300px;
16 height: 30px;
17 background: #0066FF;
18 position: absolute;
19 }
20
21 div a {
22 width: 40px;
23 height: 30px;
24 margin-right: 10px;
25 line-height: 30px;
26 text-align: center;
27 float: left;
28 text-decoration: none;
29 color: #000;
30 }
31
32 #move {
33 position: absolute;
34 top: 0;
35 left: 0;
36 width: 50px;
37 height: 30px;
38 background: rgba(0, 0, 0, .5);
39 z-index: 2;
40 }
41 .red{
42 backrgound:red;
43 }
44 </style>
45 <script>
46 function getStyle(obj,name){
47 if(obj.currentStyle){
48 return obj.currentStyle[name];//兼容ie
49 }else{
50 return getComputedStyle(obj,false)[name];//除ie以外的
51 }
52 }
53 function move1(obj,name,iTarget,time,fn){
54 var start=parseFloat(getStyle(obj,name));
55 var dis=iTarget-start;
56 var count=parseInt(time/30);
57 var step=dis/count;
58 var n=0;
59 clearInterval(obj.timer);
60 obj.timer=setInterval(function(){
61 n++;
62 var cur=start+n*step;
63 if(name=='opacity'){
64 obj.style.opacity=cur;
65 obj.style.filter='alpha('+cur*100+')';
66 }else{
67 obj.style[name]=cur+'px';
68 }
69
70 if(n==count){
71 clearInterval(obj.timer);
72 fn&&fn();
73 }
74 },30);
75 }
76 //end
77 //多个move改变
78 function move(obj,json,complete){
79 clearInterval(obj.timer);
80 complete=complete ||{};
81 complete.time=complete.time || 3000;
82 complete.easeing = complete.easeing || 'ease-in';
83 var start={};
84 var dis={};
85 for(var name in json){
86 start[name]=parseFloat(getStyle(obj,name));
87 dis[name]=json[name]-start[name];
88 }
89 var count=parseInt(complete.time/30);
90 var n=0;
91 obj.timer=setInterval(function(){
92 n++;
93 for(var name in json){
94 switch(complete.easeing){
95 case 'linear':
96 var a=n/count;
97 var cur =start[name]+dis[name]*a;
98 break;
99 case 'ease-in':
100 var a=n/count;
101 var cur =start[name]+dis[name]*a*a*a;
102 break;
103 case 'ease-out':
104 var a=1-n/count;
105 var cur =start[name]+dis[name]*(1-a*a*a);
106 break;
107 }
108 if(name=='opacity'){
109 obj.style.opacity=cur;
110 obj.style.filter='alpha('+cur*100+')';
111 }else{
112 obj.style[name]=cur+'px';
113 }
114 };
115 if(n==count){
116 clearInterval(obj.timer);
117 complete.fn&& complete.fn();
118 }
119
120 },30);
121 }
122 window.onload = function () {
123 var oMove = document.getElementById('move');
124 var oBox = document.getElementById('box');
125 var aA = oBox.children;
126 var oOff = true;
127 var arr = [];
128 for (var i = 0; i < aA.length; i++) {
129 arr[i] = {
130 left: aA[i].offsetLeft,
131 top: aA[i].offsetTop
132 }
133 }
134 //console.log(arr);
135 //布局转换--float-->定位布局
136 for (var i = 0; i < aA.length; i++) {
137 aA[i].style.position = 'absolute';
138 aA[i].style.left = arr[i].left + 'px';
139 aA[i].style.top = arr[i].top + 'px';
140 aA[i].style.margin = 0;
141 aA[i].style.zIndex = 5;
142 }
143 for (var i = 0; i < aA.length; i++) {
144 aA[i].index = i;
145 aA[i].onmouseover = function () {
146 move(oMove, {left: aA[this.index].offsetLeft}, {time: 500});
147 this.onoff = false;
148 };
149 aA[i].onmouseout = function () {
150 if (this.onoff) {
151 move(oMove, {left: aA[this.index].offsetLeft}, {time: 500});
152 } else {
153 move(oMove, {left: 0}, {time: 500, easeing: 'ease-in'});
154 }
155 };
156 aA[i].onclick = function () {
157 this.onoff = true;
158 move(oMove, {left: aA[this.index].offsetLeft}, {time: 500})
159 }
160 }
161 }
162 </script>
163 </head>
164 <body>
165 <div id="box">
166 <span id="move"></span>
167 <a href="javascript:;" class="red">张茜</a>
168 <a href="javascript:;">大飞</a>
169 <a href="javascript:;">尊尊</a>
170 <a href="javascript:;">赵帅</a>
171 <a href="javascript:;">魁哥</a>
172 <a href="javascript:;">大汉</a>
173
174 </div>
175 </body>
176 </html>
浙公网安备 33010602011771号