JS DOM 第十章动画

最新推荐文章于 2021-10-27 11:42:02 发布

conan25216

最新推荐文章于 2021-10-27 11:42:02 发布

阅读量276

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/conan25216/article/details/43605781

版权

Js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

10.1 位置与时间

10.1.1 位置设置函数

     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";
	elem.style.color = "red";
	movement = setTimeout("moveMessage()",1000);
    }

10.1.2 动画效果

    function moveMessage(){
	if(!document.getElementById) return false;
	if(!document.getElementById("message")) return false;
	var elem = document.getElementById("message");
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);   //使用DOM方法获取位置，parseInt(string)，返回string里面的数字。
	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";
	movement = setTimeout("moveMessage()",10);   //10毫秒后开始执行moveMessage函数。
    }

10.1.3 抽象

 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);
 }

10.1.4 两个信息的移动

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",125,25,20);
	if(!document.getElementById("message2")) return false;
	var elem = document.getElementById("message2");
	elem.style.position = "absolute";
	elem.style.left = "50px";
	elem.style.top = "50px";
	moveElement("message2",125,125,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);
	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(positionMessage);
addLoadEvent(moveElement(elementID,final_x,final_y,interval));