您的位置：首页 > Web前端 > JavaScript

js特效之文本方形运动

2011-08-23 02:35 483 查看

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航