美文网首页
My Third javascript eg: An anima

My Third javascript eg: An anima

作者: 短衣匹马 | 来源:发表于2016-06-07 18:06 被阅读11次
    /** * Created by Administrator on 2016/6/7 0007. */
    //首先定义一个positionMessage函数,获取到id为message的p标签
    function positionMessage() {    
    if (!document.getElementById)return false;    
    if (!document.getElementById('message'))return false;    
    var elem = document.getElementById('message');    
    //设置绝对定位,离右边距为100px,上边距为60px    
    elem.style.position = 'absolute';    
    elem.style.right = '100px';    
    elem.style.top = '60px';}
    //定义一个movemessage函数,获取到id为message的p标签
    function moveMessage() {    
    if (!document.getElementById) return false;    
    if (!document.getElementById('message')) return false;    
    var elem = document.getElementById('message');    
    //elem.style.left = '500px';    
    //定义xpos和ypos并且利用parseInt方法,返回一个数值    
    var xpos = parseInt(elem.style.left);    
    var ypos = parseInt(elem.style.top);    
    //如果xpos和ypos等于500的时候,结束这个函数    
    if(xpos == 500 && ypos == 500)return ture;    
    //如果xpos小于500,继续执行    
    if (xpos < 500){
            xpos++;    
    }    
    //如果大于500,执行xpos--返回到500,并停止    
    if (xpos > 500){
            xpos--;    
    }    
    //如果ypos小于500,继续执行    
    if (ypos < 500){
            ypos++;    
    }    
    //如果大于500,执行ypos--返回到500,并停止    
    if (ypos >500){
            ypos--;   
    }    
    //将xpos和ypos的值赋给left和top    
    elem.style.left = xpos+'px';    
    elem.style.top = ypos+'px';    
    //设置经过一段时间开始执行该函数,每隔10毫秒执行一次    
    movement = setTimeout('moveMessage()',10)}
    function addLoadEvent(func) {    
    var oldonload = window.onload;    
    if (typeof window.onload != 'function'){        
    window.onload = func;    }else {        
    oldonload();       
    func();    }
    }
    addLoadEvent(positionMessage);
    addLoadEvent(moveMessage);
    //addLoadEvent(positionMessage);
    

    相关文章

      网友评论

          本文标题:My Third javascript eg: An anima

          本文链接:https://www.haomeiwen.com/subject/iiwddttx.html