哪位大神帮我看看为什么没有动画效果-慕课网

哪位大神帮我看看为什么没有动画效果

来源：4-1 JS多物体动画

慕圣2520121

2016-07-11 09:49

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,div,span,ul,li{ margin:0; padding:0;}
#div1{ width:200px; height:200px; background:#F00; position:relative; left:-200px; top:0;}
#div1 span{ width:20px; height:50px; background-color:#00F; position:absolute; left:200px; top:75px;}
#div2{width:200px; height:200px; background-color:#F00;
  filter:alpha(opacity:30);
  opacity:0.3;
}
ul,li{list-style:none;}
ul li{width:200px; height:100px; background-color:#FF0; margin-bottom:20px;}
</style>
<script type="text/javascript">
window.onload = function(){
  /*var oDiv = document.getElementById('div1');
  oDiv.onmouseover = function(){
   startMove(0);
  }
  oDiv.onmouseout = function(){
   startMove(-200);
  }

  var oDiv2 = document.getElementById('div2');
  oDiv2.onmouseover = function(){
   startMove2(100);
  }
  oDiv2.onmouseout = function(){
   startMove2(30);
  }*/

  var aLi = document.getElementsByTagName('li');
  for(var i = 0; i < aLi.length; i++){
   aLi[i].onmouseover = function(){
    startMove3(this,400);
   }
   aLi[i].onmouseover = function(){
    startMove3(this,200);
   }
  }
}

/*var timer = null;
function startMove(itarget){
  clearInterval(timer);
  var oDiv = document.getElementById('div1');
  timer = setInterval(function(){
   var iSpeed = (itarget-oDiv.offsetLeft)/20;
   iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
   if(oDiv.offsetLeft == itarget){
    clearInterval(timer);
   }else{
    oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
   }
  },30);
}

var timer2 = null;
var alpha = 30;
function startMove2(itarget){
  clearInterval(timer2);
  var oDiv2 = document.getElementById('div2');
  timer2 = setInterval(function(){
   var speed = 0;
   if(alpha > itarget){
    speed = -10;
   }else{
    speed = 10;
   }
   if(alpha == itarget){
    clearInterval(timer2);
   }else{
    alpha += speed;
    oDiv2.style.filter = 'alpha(opacity:'+alpha+')';
    oDiv2.style.opacity = alpha/100;
   }
  },30);
}*/

var timer3 = null;
function startMove3(obj,iTarget){
  clearInterval(timer3);
  timer3 = setInterval(function(){
   var speed = (iTarget - obj.offsetWidth)/8;
   speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
   if(obj.offsetWidth == iTarget){
    clearInterval(timer3);
   }
   else{
    obj.style.width = obj.offsetWidth + speed + 'px';
   }
  },30);
}
</script>
</head>

写回答关注

1回答

V五两V

2016-07-11 11:06:13

aLi[i].onmouseover = function(){
    startMove3(this,400);
   }
   aLi[i].onmouseover = function(){
    startMove3(this,200);
鼠标离开是onmouseout

0 1

JS动画效果

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题

求大神帮忙看看为什么没效果

回答 1

哪位大神帮我看看，为什么我就是没有效果，按照老师的看了好几遍了

回答 1

求大神帮看看哪里写错了？没有效果

回答 2

为什么透明度动画按照老师的做没有效果，哪里出错了吗？求大神帮忙看看。

回答 2

求大神看看我的为啥没效果

回答 1

打开慕课网App查看更多内容