JavaScript运动js没有被执行，请给个提示？

Question

JavaScript运动js没有被执行，请给个提示？

48

更新于 2017-10-13

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 200px;
                width: 200px;
                background: red;
                margin: 10px;
                float: left;
                /*border: 2px solid black;*/
                            
            }
            
        </style>
    </head>
    <body>
        <script>
            function getStyle(obj,name){
                if (obj.currentStyle) {
                    return obj.currentStyle.name;
                } else{
                    return getComputedStyle(obj,false)[name];
                }    
            }
            function  moveStart(obj,attr,iTarget){
                clearInterval(obj.times);
                obj.times = setInterval(function(){
                    var cur = parseInt(getStyle(obj,attr));
                    //var oDiv = document.getElementsByTagName("div");
                    var speed = (iTarget-cur)/6;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if(iTarget==cur){
                        clearInterval(obj.times)
                    }else{
                        obj.style['attr'] = cur +speed+"px";
                    }
                },30)
                
                window.onload = function(){
                    var oDiv1 = document.getElementById("div1");
                    var oDiv2 = document.getElementById("div2");
                    
                    oDiv1.onmouseover= function(){
                            moveStart(this,'height',400)
                        }
                        oDiv1.onmouseout= function(){
                            moveStart(this,'height',200)
                        }
                        oDiv2.onmouseover= function(){
                            moveStart(this,'width',400)
                        }
                        oDiv2.onmouseout= function(){
                            moveStart(this,'width',200)
                        }
                }
            }
            
        </script>
        <div id="div2">高度</div>
        <div id="div2">宽度</div>
    </body>
</html>

运动封装函数 javascript

阅读 1.2k

1 个回答

得票最新

spencerht

7.8k

发布于 2017-10-13

✓ 已被采纳

div的id第一个应该是div1吧。
把window.onload写在了函数内部。。。
obj.style['attr']中的变量不要加引号

最终修改代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    div {
      height: 200px;
      width: 200px;
      background: red;
      margin: 10px;
      float: left;
      /*border: 2px solid black;*/
    }
  </style>
</head>

<body>
  <script>
    function getStyle(obj, name) {
      if (obj.currentStyle) {
        return obj.currentStyle.name;
      } else {
        return getComputedStyle(obj, false)[name];
      }
    }

    function moveStart(obj, attr, iTarget) {
      clearInterval(obj.times);
      obj.times = setInterval(function () {
        var cur = parseInt(getStyle(obj, attr));
        //var oDiv = document.getElementsByTagName("div");
        var speed = (iTarget - cur) / 6;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (iTarget == cur) {
          clearInterval(obj.times)
        } else {
          obj.style[attr] = cur + speed + "px";
        }
      }, 30)

    }
    window.onload = function () {
      var oDiv1 = document.getElementById("div1");
      var oDiv2 = document.getElementById("div2");

      oDiv1.onmouseover = function () {
        console.log(1)
        moveStart(this, 'height', 400)
      }
      oDiv1.onmouseout = function () {
        moveStart(this, 'height', 200)
      }
      oDiv2.onmouseover = function () {
        moveStart(this, 'width', 400)
      }
      oDiv2.onmouseout = function () {
        moveStart(this, 'width', 200)
      }
    }
  </script>
  <div id="div1">高度</div>
  <div id="div2">宽度</div>
</body>

</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

宣传栏

1176