在屏幕内沿边框碰撞的文字

技术文章

在屏幕内沿边框碰撞的文字

时间：2008-10-08 点击：817

<html>

<head>
<title>在屏幕内沿边框碰撞的文字</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>

<body onload="setValues()">
<script>
<!-- Beginning of JavaScript -
var your_message="欢迎学习网页特效制作!"
var textfont="Verdana"
var textsize=20
var textcolor="ff0000"
var textboldness=7
var tempo=40
var stepx=30
var stepy=20
var msg=new Array()
var msg=your_message
var message=msg.split("")
var numberofletters=msg.length-1
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
textboldness=textboldness*100
var timer
var xpos=new Array()
var ypos=new Array()
var spancontent=new Array()

for (i=0; i<=numberofletters;i++) {
    xpos[i]=0
	ypos[i]=0
}

for (i=0;i<=numberofletters;i++) {
	spancontent[i]="<span style='position:relative;font-family:"+textfont+";font-size:"+textsize+"pt;color:"+textcolor+";font-weight:"+textboldness+"'>"+message[i]+"</span>"
}

function setValues() {
    var firsttimer= setTimeout("setValues2()",2000)
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
    return rand
}

function moveball() {
	if (document.all) {
		checkposition()
   		makesnake()
   		document.all.span0.style.posTop+=stepy
    	timer=setTimeout("moveball()",tempo)
	}
	if (document.layers) {
		checkposition()
   		makesnake()
   		document.span0.top+=stepy
    	timer=setTimeout("moveball()",tempo)
	}
}

function checkposition() {
	if (document.all) {
		if (document.all.span0.style.posLeft>marginright) {
			stepx=(stepx+randommaker(2))*-1
			document.all.span0.style.posLeft-=1
		}
		if (document.all.span0.style.posLeft<marginleft) {
			stepx=(stepx+randommaker(2))*-1
			document.all.span0.style.posLeft+=1
		}	
		if (document.all.span0.style.posTop>marginbottom) {
			stepy=(stepy+randommaker(2))*-1
			document.all.span0.style.posTop-=1
		}
		if (document.all.span0.style.posTop<margintop) {
			stepy=(stepy+randommaker(2))*-1
			document.all.span0.style.posTop+=1
		}
	}
	if (document.layers) {
		if (document.span0.left>=marginright) {
			stepx=(stepx+randommaker(2))*-1
			document.span0.left-=10
		}
		if (document.span0.left<=marginleft) {
			stepx=(stepx+randommaker(2))*-1
			document.span0.left+=10
		}	
		if (document.span0.top>=marginbottom) {
			stepy=(stepy+randommaker(2))*-1
			document.span0.top-=10
		}
		if (document.span0.top<=margintop) {
			stepy=(stepy+randommaker(2))*-1
			document.span0.top+=10
		}
	}
}
// - End of JavaScript - -->
</script>
<script>
<!-- Beginning of JavaScript -

for (i=0;i<=numberofletters;i++) {
    document.write("<span id='span"+i+"' style='position:absolute'></span>")
    document.close()
}

// - End of JavaScript - -->
</script>

</body>
</html>

打字效果的文字切换

文字变色逐个出现

不断弹射的文本

文字的多种显示效果

霓虹灯效果的闪烁文字

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：