标题背景运动==原生

  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>
标题背景 运动==原生

标题背景运动==原生
