js实现导航栏上下动画效果_javascript技巧_

function getStyle(obj, attr) {     if(obj.currentStyle)     {         return obj.currentStyle[attr];     }     else     {         return getComputedStyle(obj, false)[attr];     } } function startMove(obj,json,fnEnd){     if(obj.timer){         clearInterval(obj.timer);     };     obj.timer=setInterval(function(){         var bStop = true; //假设全部找到         for(var attr in json){             var icurr = 0;             if(attr=='opacity'){//匹配key                 icurr=Math.round(parseFloat(getStyle(obj,attr))*100); //获取元素的属性值             }else{                 icurr=parseInt(getStyle(obj,attr));             };             var sPeed = (json[attr]-icurr)/8;             sPeed=sPeed>0?Math.ceil(sPeed):Math.floor(sPeed);             if(attr=='opacity'){                 obj.style.filter="alpha(opacity:"+(icurr+sPeed)+")";                 obj.style.opacity=(icurr+sPeed)/100;             }else{                 obj.style[attr]=icurr+sPeed+'px';             }             if(icurr!=json[attr]){                 bStop=false;             }         }         if(bStop){             clearInterval(obj.timer);             if(fnEnd){                 fnEnd();             }         }     },30); } // alert('dffe');

关于
招聘
产品
公司

*{     margin: 0;     padding: 0; } a{     text-decoration: none; } body{     background-color: #c1c1c1; } #box{     width: 880px;     margin: 100px auto;     overflow: hidden; } #box div{     width: 200px;     height: 100px;     float: left;     overflow: hidden;     position: relative; } #box div a{     position: absolute;     left: 0;     top: 0;     width: 200px;     height: 100px;     display: block;     /* background-color: red; */ background: url(../images/1.jpg) no-repeat; } #box div span{     display: block;     width: 200px;     height: 100px;     position: absolute;     background: url(../images/window.png) left top repeat-x; } #box div em{     display: block;     width: 100%;     height: 100%;     background-color: #999;     position: absolute;     text-align: center;     line-height: 100px;     font-family: Verdana;     font-style: normal;     font-size: 30px;     color: white;     text-shadow: 2px 1px 4px black;     top: 0; } #box div a.a01{         /* background: url(../images/1.jpg) 0 5px no-repeat; */     background-position: 0 5px; } #box div a.a02{         /* background: url(../images/1.jpg) 0 5px no-repeat; */     background-position: -200px 5px; } #box div a.a03{         /* background: url(../images/1.jpg) 0 5px no-repeat; */     background-position: -400px 5px; } #box div a.a04{         /* background: url(../images/1.jpg) 0 5px no-repeat; */     background-position: -600px 5px; }

window.onload=function(){     var oDiv = document.getElementById('box');     var aDiv = oDiv.getElementsByTagName('div');     var aEm = oDiv.getElementsByTagName('em');         var aEm = oDiv.getElementsByTagName('em');     for(var i=0;i