页面加载动画实现-优快云博客

本文链接：https://blog.youkuaiyun.com/wowoniuzailushang/article/details/53373942

本文介绍了一个使用JavaScript实现的页面加载完成后自动移动的消息框动画效果。该动画通过不断更新消息框的位置来使其从初始位置移动到指定的目标位置。文章还提供了一种在页面加载完成时执行多个函数的方法。

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



	
   
   
	Document


wheel!
	<script>
		function addLoadEvent(func){
			var oldοnlοad=window.onload;  //将现有的事件处理函数的值存入变量中
			if(typeof window.onload!="function"){
				window.οnlοad=func; //如果这个事件处理函数没有绑定任何函数，就把新函数添加给它
			}else{
				window.οnlοad=function(){
					oldonload();
					func(); //如果已经绑定了函数，就把新函数追加到现有指令的末尾
				}
			}
		}
		//onload事件会在页面或则图片加载完成时执行，window.onload = function(){} 它只能绑定一个函数如果我们
		//需要绑定多个函数就要用到我们可以用addLoadEvent函数
		//以后不管有多少函数我们都可以这样执行：
		//addLoadEvent(firstfunction);
		//addLoadEvent(secondfunction);
		//addLoadEvent(thirdfunction);
		function moveMessage(){
			if(!document.getElementById) return false;  //如果不能获取DOM元素就返回false
			if(!document.getElementById("message")) return false;	
			var elem=document.getElementById("message");
			var ypos=parseInt(elem.offsetTop);
			var xpos=parseInt(elem.offsetLeft);
			console.log(ypos)
			console.log(xpos)
			var num = 0;
			if(xpos==200&&ypos==100){
				return true;
				clearInterval(timer);
			}
			if(xpos<200){
				xpos++;
				num++;
				console.log(num);
			}
			if(xpos>200){
				xpos--;
			}
			if(ypos<100){
				ypos++;
			}
			if(ypos>100){
				ypos--;
			} 
			elem.style.left=xpos+"px";
			elem.style.top=ypos+"px";
			timer=setTimeout("moveMessage()",10);
		}
        addLoadEvent(moveMessage);
	</script>

js原生运动