用JavaScript实现动画效果

最新推荐文章于 2023-07-16 12:49:10 发布

BigData_邢捕头

最新推荐文章于 2023-07-16 12:49:10 发布

阅读量347

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_27909949/article/details/73729931

本文介绍了一个使用JavaScript实现的简单示例，展示了如何通过修改DOM元素的位置属性来改变其在网页上的位置。具体包括初始化元素位置、逐步移动元素到目标位置的函数及加载事件的绑定。

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

positionMessage.js

function positiononMessage() {
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", 125, 25, 20);
}
addLoadEvent(positiononMessage);

moveElement.js

addLoadEvent.js

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Explaining the Document Object Model</title>
<meta charset="utf-8" />
</head>
<body>
<p id="message">Whee!</p>
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/positionMessage.js"></script>
<script src="scripts/moveElement.js"></script>
</body>
</html>

格式如下：