Arura_Owl 2016-12-26 08:49 采纳率: 100%
浏览 883
已采纳

简单的javascript动画的运行问题

写了一段很简单的动画代码,调试时有问题,自己找了半天也不知道哪边错了

下面是html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>moveMessage</title>
        <script type="text/javascript" src="js/move.js"></script>
        <script type="text/javascript" src="js/addLoadEvent.js"></script>
    </head>
    <body>
        <p id="message">
            Yummy!!!
        </p>    

        <p id="message2">Whee!!!</p>

    </body>
</html>

js代码

 function moveElemnet(elementID,final_x,final_y,interval){

    console.log();
    console.trace();

    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if(xpos == final_x && ypos == final_y){
        return true;
    }
    if(xpos < final_x){
        xpos++;
    }
    if(xpos > final_x){
        xpos--;
    }
    if(ypos < final_y){
        ypos++;
    }
    if(ypos > final_y){
        ypos--;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    alert(repeat);
    movement = setTimeout(repeat,interval);
}

function positionMessage(){

    console.log();
    console.trace();

    if(!document.getElementById) return false;
    if(!document.getElementById("message")) return false;
    var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "200px";
    elem.style.top = "400px";
    moveElemnet("message",400,800,10);
    if(!document.getElementById("message2")) return false;
    var elem = document.getElementById("message2");
    elem.style.position = "absolute";
    elem.style.top = "50px";
    elem.style.left = "50px";
    moveElemnet("message2",125,25,20);
}

 function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload()
            func();
        }   
    }
}

addLoadEvent(positionMessage);
addLoadEvent(moveElemnet);

调试截图

图片说明
图片说明
图片说明

望大神解答

  • 写回答

1条回答 默认 最新

  • 小鬼web 2016-12-26 09:25
    关注

    图片说明

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)