版权声明：本文为博主原创文章，转载时请标明出处 https://blog.csdn.net/weixin_41056807/article/details/84064077
从位置距上100距左50的位置开始移动 直到到达距上100距左200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="message">Wheel</p>
<script>
//移动
function moveMessage() {
if (!document.getElementById) return false;
if (!document.getElementById("message")) return false;
var elem = document.getElementById("message");
//表示目的地的“左”“上”位置.。这里需要用parse把字符串里的数值提取出来
var xpos = parseInt(elem.style.left);
var ypos =parseInt(elem.style.top);
if (xpos==200&&ypos==100){
return true;
}
if (xpos<200){
xpos++;
}
if (xpos>200){
xpos--;
}
if (ypos<100){
ypos++;
}
if (ypos>100){
ypos--;
}
elem.style.left = xpos+"px";
elem.style.top = ypos+"px";
//从位置距上100距左50的位置开始移动 直到到达距上100距左200
movement = setTimeout("moveMessage()",10);
}
//位置
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";
//时间——延时
movement = setTimeout("moveMessage()",3000);
clearTimeout(movement);
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !='function'){
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
addLoadEvent(positionMessage);
addLoadEvent(moveMessage);
</script>
</body>
</html>
现在增加一个函数：实现抽象函数的作用
moveElement
参数
- 打算移动的元素id——elementID
- 该元素的目的地的左位置——final-x
- 该元素的目的地的上位置——final-y
- 两次移动之间的停顿时间——interval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="message">Wheel</p>
<script>
//位置
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);
//表示目的地的“左”“上”位置.。这里需要用parse把字符串里的数值提取出来
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);
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !='function'){
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
addLoadEvent(positionMessage);
addLoadEvent(moveElement);
</script>
</body>
</html>
效果是一样的，不再展示
当在html中添加新元素，只需要找到id并修改他移动的位置还有时间就好，很方便！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="message">Wheel</p>
<p id="message2">Wheel</p>
<script>
//位置
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";
if (!document.getElementById("message2")) return false;
var elem = document.getElementById("message2");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "50px";
//时间——延时
moveElement("message",200,100,10)
moveElement("message2",125,25,20)
}
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
//表示目的地的“左”“上”位置.。这里需要用parse把字符串里的数值提取出来
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);
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !='function'){
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
addLoadEvent(positionMessage);
addLoadEvent(moveElement);
</script>
</body>
</html>
最终停的位置
