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 300px; 16 height: 30px; 17 background: #0066FF; 18 position: absolute; 19 } 20 21 div a { 22 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 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>