不准时更新的日常，这次我们使用javaScript实现一个简单的动画移动效果，其思路想法很简单，就是采用“CSS DOM”,对元素的位置进行改变。然后使用setTimeout()函数，对改变位置的函数进行反复调用，让文字或图片进行移动，行成动画效果。

废话不多说，直接上code:

 

这是HTML：

<body>

		<p id="message">
		逝者如斯夫,不舍昼夜。
		</p>

		<script src="js/initPosition.js"></script>
		<script src="js/onload.js"></script>
		<script src="js/动画/donghua.js"></script>
		<script src="js/final.js"></script>
		<script src="js/动画/jishu.js"></script>
	</body>

 

这是initPosition:　　 其作用就是获取元素的初始化位置。

function initPos(){

	var elem=document.getElementById("message");     //获取id message
	elem.style.color="#"+randomColor();    //这是自己定义的随机颜色函数，后面会上代码。
	elem.style.position="absolute";     //DOM定义样式，位置等
	elem.style.left="30px";
	elem.style.top="50px";
	moveElement("message",500,500,10); //欲知详情请往下看

}

 

这是onload.js: 页面加载完成后调用inipos()函数

window.onload=function(){
	initPos();
}

这是donghua.js 也就是实现文字或图片移动的关键

function moveElement(elementID,final_x,final_y,interval){  //参数分别为id选择器的值，x 轴上目的位置，y轴上目的位置，函数执行的时间间隔
  	var elem=document.getElementById(elementID); //获取id，此处也即是message

	var xpos=parseInt(elem.style.left); //获取初始，采用parsInt函数，将字符串变成数字。为什么要换成数字？原因是我们要将这个位置与目的位子进行比较
	var ypos=parseInt(elem.style.top);

	if(xpos<final_x){  //位置比较，如果这个元素的位置小于目的位置，那么这个元素初始位置增加，
		xpos++;
	}
	if(xpos>final_x){ //如果这个位置大于目的位置，那么初始位置 --“”
		xpos--;
	}
	if(ypos>final_y){
		ypos--;
	}
	if(ypos<final_y){
		ypos++;
	}
	if(xpos==final_x&&ypos==final_y){  //咳咳，这个下面会说，可以接着往下看
		final();
	}
	elem.style.left=xpos+"px";  //上面我们为了与目的位置进行比较而将初始位置变成数字，这样我们是无法改变元素样式的，所以我们这里加上"px";
	elem.style.top=ypos+"px";

	var repeat="moveElement('"+elementID+"',+"+final_x+","+final_y+","+interval+")"; //把函数赋给变量，方便下面的书写使用，不然setTimeOut里面放一长串的代码，看起来是很痛苦的。
      movment=setTimeout(repeat,interval); // setTImeout()函数，其意思是间隔interval（参数）时间调用一次repeat（函数，此处函数为moveElement()函数）;
}

这是final.js  ：

function final(){
	location.reload(); //o(╥﹏╥)o，为了反复看动画移动，我这里很粗暴的直接实现了页面刷新。。。
}function randomColor(){
	var color=Math.ceil(Math.random()*1700).toString(16);  //随机颜色函数，改变文字颜色，让文字动画看起来更明显。
	return color;
}

 

效果可以查看：https://runjs.cn/detail/gzxxneoo    

暂时将代码放到run.js展示。 但是每次刷新页面都会卡一下。看来每次加载一下的效果并不好，看不清可以手动刷新页面。