javascript特效之文本上下彈跳

 javascript特效實現文本上下彈跳,就是在文檔中上下來回的運動,我製作了上下的運動,當然可以加入左右的運動,這樣即使走一個方形路線了

 

html:

 

<html>
<head>
<title>文本上下彈跳</title>

</head>
<body onload='yundong();' >
<p id='wenzi'><font color='blue'>我會上下動哦</font></p>
<script type="text/javascript">
<!--
wenzi.style.position='absolute';
var height=document.body.clientHeight;//高度限制
var sudu=200;//速度,1秒移動的距離
var t=50;//每隔50毫秒運動一次,速度*t/1000=每次運動移動的距離
var fx='down';//運動的方向的標示,down向下,up向上
	//上下運動的效果
	function yundong(){
	//引用運動的對象
	var p=document.getElementById('wenzi');
	//根據運動的方向,上下,進入分支語句
	if(fx=='down'){
	if((p.offsetTop+sudu*t/1000)>=height){
	p.style.top=height;
	fx='up';
	}//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='down';
	}//end if((p.offsetTop-sudu*t/1000)<=0)
    //沒有超過,則減值
	else{
	p.style.top=p.offsetTop-sudu*t/1000;
	}
	}//end else if(fx=='up')
	//設置遞歸延時調用函數自身
	setTimeout('yundong()',t);
	}

	
	
//-->
</script>


</body>
</html>


 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章