JS 移动动画

时间:2022-11-27 16:59:14

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 elementLeft = parseInt(elem.style.left);
            var elementTop = parseInt(elem.style.top);
            if (elementLeft == final_x && elementTop == final_y) {
                return true;
            }
            if (elementLeft < final_x) {
                elementLeft++;
            }
            if (elementLeft > final_x) {
                elementLeft--;
            }
            if (elementTop < final_y) {
                elementTop++ ;
            }
            if (elementTop > final_y) {
                elementTop--;
            }
            elem.style.left = elementLeft + 'px';
            elem.style.top = elementTop + 'px';
            var repeat = "moveElement('"+ elementId + "'," + final_x + "," + final_y + "," + interval + ")";
            movement = setTimeout(repeat, interval);
        }

   function positionMsg() {
            var elem = document.getElementById('message');
            elem.style.position = 'absolute';
            elem.style.left = '10px';
            elem.style.top = '100px';
            moveElement('message',200,500,100);
        };