zoukankan      html  css  js  c++  java
  • moveElement函数与positionMessage函数

    function moveElement(elementID,final_x,final_y,interval){
        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+")";
        movement=setTimeout(repeat,interval);
        
    }
     
     addLoadEvent(moveMessage);

    moveElement函数,用于使带有id元素属性的文档移动,只要给出元素id,最终x坐标,最终y坐标,时间间隔。就可以调用此函数。

    function positionMessage(){
        if (!document.getElementById) return false;
        if (!document.getElementById("message")) return false;
            var elem=document.getElementById("message");
            elem.style.position="absolute";
            elem.style.left="50px";
            elem.style.top="100px";
            moveElement("message",200,100,10);
        }
    addLoadEvent(positionMessage);
    positionMessage函数,设置带有id元素属性文档位置函数,搭配moveElement函数可以达到动画效果。
    function moveElement(elementID,final_x,final_y,interval){
        if (!document.getElementById) return false;
        if (!document.getElementById(elementID)) return false;
        var elem=document.getElementById(elementID);
        if (elem.movement) {
            clearTimeout(elem.movement);
        }
        var xpos=parseInt(elem.style.left);
        var ypos=parseInt(elem.style.top);
        var dist=0;
        if (xpos==final_x&&ypos==final_y) {
        return true;
    }
        if (xpos<final_x) {
            dist=Math.ceil((final_x-xpos)/10);
            xpos=xpos+dist;
        }
        if (xpos>final_x) {
            dist=Math.ceil((xpos-final_x)/10);
            xpos=xpos-dist;
        }
        if (ypos<final_y) {
            dist=Math.ceil((final_y-ypos)/10);
            ypos=ypos+dist;
        }
        if (ypos>final_y) {
            dist=Math.ceil((ypos-final_y)/10);
            ypos=ypos-dist;
        }
        elem.style.left=xpos+"px";
        elem.style.top=ypos+"px";
        var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
        elem.movement=setTimeout(repeat,interval);
        
    }
     
     addLoadEvent(moveMessage);

    这是改进版,移动速度随着初始与目标距离的增加逐渐加快。

     
  • 相关阅读:
    combobox获取dataset部分数据的方法
    vs2008设置Jquery自动感知方法
    iOS7 初体验
    数据采集[即与 WEB 相关的功能函数]
    javascript 时间倒计时效果
    有进度条圆周率计算
    python科学计算库
    python随笔
    jieba库
    数据分析模块pandas
  • 原文地址:https://www.cnblogs.com/CClarence/p/4913306.html
Copyright © 2011-2022 走看看