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>