                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

哪里出错了

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }
  #move {
   width: 200px;
   height: 240px;
   margin: 10px auto;
   border: 1px solid #ccc;
  }
  #move a {
   display: inline-block;
   width: 58px;
   height: 55px;
   border: 1px solid #ddd;
   border-radius: 3px;
   background-color: #fff;
   text-align: center;
   margin: 10px 17px;
   position: relative;
   color: #9c9c9c;
   font-size: 12px;
   text-decoration: none;
   line-height: 25px;
   overflow: hidden;
   opacity: 1;
   filter: Alpha(opacity=100);
  }
  #move a i {
   position: absolute;
   top: 20px;
   left: 0;
   display: inline-block;
   width: 100%;
   text-align: center;
  }
  #move img {
   padding: 3px 0;
   border: none;
   z-index:-1
  }
  #move a:hover {
   color: #f00;
  }
</style>
<script type="text/javascript" >
  window.onload=function(){
   var oDiv=document.getElementById('move'),
    oA=oDiv.getElementsByTagName('a');
  for(var i=0;i<oA.length;i++){
   oA[i].onmouseover=function(){
    var othis=this.getElementsByTagName('i');
    Move(othis,{top:-20,opacity:30})
   }
  }

}

function Move(obj,json,fn){
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
   var flag=0;
   for(var attr in json){
    var iCur=0;
    if(attr == 'opacity'){
     iCur=Math.round(parseFloat(getStyle(opbj,attr))*100);
    }
    else{
     iCur=parseInt(getStyle(obj,attr));
    }
    var speed=(json[attr]-iCur)/8;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(iCur != json[attr]){
     flag=false;
    }
    if(attr == 'opacity'){
     obj.style.filter="alpha(opacity:'iCur+speed')";
     obj.style.opacity=(iCur+speed)/100;
    }
    else{
     obj.style[attr]=iCur+speed+'px';
    }
    if(flag){
     clearInterval(obj.timer);
     if(fn){
      fn();
     }
    }
   }
  },30);
}
function getStyle(obj,attr){
  if(obj.currentStyle){
   return obj.currentStyle[attr];
  }
  else{

  }
}
</script>

</head>
<body>
<div id="move">
  <a href="#">
   <i><img src="images/food.png"></i>
   <p>食物</p>
  </a>
  <a href="#">
   <i><img src="images/game.png"></i>
   <p>游戏</p>
  </a>
  <a href="#">
   <i><img src="images/insurance.png"></i>
   <p>保险</p>
  </a>
  <a href="#">
   <i><img src="images/lottery.png"></i>
   <p>彩票</p>
  </a>
  <a href="#">
   <i><img src="images/movie.png"></i>
   <p>电影</p>
  </a>
  <a href="#">
   <i><img src="images/travel.png"></i>
   <p>旅游</p>
  </a>
</div>
</body>
</html>

LanceChou

2016-10-10

源自：JS动画效果 7-1

关注问题我要回答

780

操作

收起

1 回答

weibo_猪猪猪惠婷_0 回答被采纳 +3 积分
2016-10-11

不知道你运行代码的时候发现没有，你的文字在图片上方。之所以有这个问题，是因为你没有给<a>设置padding。而<i>它是相对<a>绝对定位的，它的top=20px，对后面的<p>不再产生影响，因此,p就跑到了top=20px的那20px的高度之中啦。
错误1：你声明变量flag的时候声明错误，应该是

var flag=true;

3.Move函数里面有一处书写错误，obj写成了opbj，更正后：

if(attr == 'opacity'){
     iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
    }

4.获取样式函数getStyle()的else{}里面根本没有任何内容啊，也就是说在chrome，Safari等浏览器里面这个函数根本没有起到获取样式的作用啊。可以这样改：

function getStyle(obj,attr){
  if(obj.currentStyle){
   return obj.currentStyle[attr];
  }
  else{
   return getComputedStyle(obj,false)[attr];
  }
 }