问答详情
源自:2-1 JS速度动画

关于速度动画的问题,没反应

<!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>
</head>
<style>
body,div,span{
    padding:0;
    margin:0;
}
#div1{
    width:300px;
    height:400px;
    background:#39C;
    position:relative;
    top:100px;
    left:-200px;
}
#div1 span{
    width:33px;
    height:110px;
    background:#3CF;
    position:absolute;
    top:150px;
    left:200px;
    font-family:"微软雅黑";
    color:#FFF;
    font-weight:bold;
}
</style>
<script>
window.onload=function(){
  var oDiv=document.getElementById("div1");
  oDiv.onmouseover=function(){
    slMove(0);
  }
  oDiv.onmouseout=function(){
    slMove(-200);
  }
}
var timer=null;
function slMove(target){
  clearInterval(timer);
  var oDiv=document.getElementById("div1");
  timer.setInterval(function(){
       var speed=0;
        if(oDiv.offsetLeft > target){
           speed=-10;
           }else{
           speed=10;
        }
       if(oDiv.offsetLeft==target){
        clearInterval(timer);
  }else{
      oDiv.style.left=oDiv.offsetLeft+speed+'px';
      }
      },50)
}
</script>
<body>
<div id="div1"><span style="text-align:center" id="water">W<br />A<br />T<br />E<br />R<br /> </span></div>
</body>
</html>

看了教程后,没看代码,自己写了一遍,然后检查了几遍,结果运行没反应,和原版的对照着看,也没发现什么问题,哪位可以帮忙解答下

提问者:燃料 2017-03-11 15:28

个回答

  • 10点
    2017-03-11 15:57:06
    已采纳

    function slMove(target){
      clearInterval(timer);
      var oDiv=document.getElementById("div1");
      timer.setInterval(function(){
           var speed=0;
            if(oDiv.offsetLeft > target){
               speed=-10;
               }else{
               speed=10;
            }

    把timer.setInterval(function()里的.改成=,timer=setInterval(function()

  • 10点
    2017-03-11 15:58:16

    timer不是一个对象,而且也不是一个function,而且是放计时器的,用=号,