js动画从一个位置渐渐移动到另外一个位置通用-优快云博客

本文介绍了一种使用JavaScript实现的CSS-DOM元素动画效果。通过获取DOM元素并设置其绝对定位，配合自定义函数逐步调整元素的位置，最终实现平滑移动到指定位置的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>CSS-DOM</title>

<link rel="stylesheet" type="text/css" href="10.css" >

<script src="10.js"></script> 

</head>

<body>
 
 <p id="message">
Whee!

</p>
 
</body>

</html>

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);
}
 
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); //parseInt(string)把字符串里面的数值信息提取出来，因为后面要进行很多算术比较操作。

var ypos = parseInt(elem.style.top);  //parseFloat(string)可以把带小数的数值（也就是浮点数）提取出来。

if(xpos == final_x && ypos == final_y){

return true;
}

if(xpos < final_x){ xpos++;}       //如果xpos小于终点的left,给它加1.

if(xpos > final_x){ xpos--;}       //如果xpos大于终点的left,给它减1.

if(ypos < final_y){ ypos++;}       //如果ypos小于终点的left,给它加1.

if(ypos > final_y){ ypos--;}       //如果ypos大于终点的left,给它减1.

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";
//var  repeat = function() {moveElement(elementID, final_x,final_y,interval)} 

var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
movement = setTimeout(repeat,interval);
//clearTimeout(movement); 在等待的interval那时间内，可以取消这一“跳跃”行为
}
 
addLoadEvent(positionMessage);

本文转自  小旭依然  51CTO博客，原文链接:http://blog.51cto.com/xuyran/1783911

js动画 从一个位置渐渐移动到另外一个位置 通用

js动画从一个位置渐渐移动到另外一个位置通用