为了账号安全,请及时绑定邮箱和手机立即绑定

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

<!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>

<body>
 <!--<div id="div1"><span>分享</span></div>
    <div id="div2"></div>-->
   
    <ul>
     <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

正在回答

1 回答

aLi[i].onmouseover = function(){
    startMove3(this,400);
   }
   aLi[i].onmouseover = function(){
    startMove3(this,200);

鼠标离开是onmouseout

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信