js特效之文本方形运动

最新推荐文章于 2024-09-06 14:24:59 发布

wxhlxx

最新推荐文章于 2024-09-06 14:24:59 发布

阅读量724

点赞数

文章标签： up function html 文档

本文链接：https://blog.csdn.net/wxhlxx/article/details/6710360

版权

js特效之文本方形运动，实现文本绕文档边框做方形运动

html:

<html>
<head>
<title>文本方形运动</title>

</head>
<body οnlοad='yundong();' >
<p id='wenzi'><font color='blue'>我在做方形运动</font></p>
<script type="text/javascript">
<!--
wenzi.style.position='absolute';
var height=document.body.clientHeight;//高度限制
var width=document.body.clientWidth;//宽度限制
var sudu=200;//速度，1秒移动的距离
var t=50;//每隔50毫秒运动一次，速度*t/1000=每次运动移动的距离
var fx='down';//运动的方向的标示，down向下，up向上,left左，right右
	//上下运动的效果
	function yundong(){
	//引用运动的对象
	var p=document.getElementById('wenzi');
	//alert(p.offsetHeight);
	//return '';
	//根据运动的方向，上下，进入分支语句
	//向下运动
	if(fx=='down'){
	if((p.offsetTop+p.offsetHeight+sudu*t/1000)>=height){
	p.style.top=height-p.offsetHeight;
	fx='right';
	}//end if((p.offsetTop+sudu*t/1000)>=height)
	else{
	p.style.top=p.offsetTop+sudu*t/1000;
	}
	}//end if(fx=='down)
	
	//路过向上
	else if(fx=='up'){
	//路过超过了顶端，设置为top=0
	if((p.offsetTop-sudu*t/1000)<=0){
	p.style.top=0;
	fx='left';
	}//end if((p.offsetTop-sudu*t/1000)<=0)
    //没有超过，则减值
	else{
	p.style.top=p.offsetTop-sudu*t/1000;
	}
	}//end else if(fx=='up')
	
	//路过向右
	else if(fx=='right'){
	//路过右边原超过右壁
	if((p.offsetLeft+p.offsetWidth+sudu*t/1000)>=width){
	p.style.left=width-p.offsetWidth;
	fx='up';
	}
	else{
	p.style.left=p.offsetLeft+sudu*t/1000;
	}
	}//end else if(fx=='left')

	//向左运动
	else if(fx=='left'){
	if(p.offsetLeft-sudu*t/1000<=0){
	p.style.left=0;
	fx='down';
	}
	else{
	p.style.left=p.offsetLeft-sudu*t/1000;
	}
	}
	//设置递归延时调用函数自身
	setTimeout('yundong()',t);
	}

	
	
//-->
</script>


</body>
</html>

wxhlxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js特效之文本方形运动

js特效之文本方形运动，实现文本绕文档边框做方形运动 html:文本方形运动我在做方形运动<!--wenzi.style.position='absolute';var height=document.body.clientHe
复制链接

扫一扫