javascript特效之文本上下弹跳

 javascript特效实现文本上下弹跳,就是在文档中上下来回的运动,我制作了上下的运动,当然可以加入左右的运动,这样即使走一个方形路线了

 

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 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>


 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值