7-11.htm

JavaScript网页特效实例大全

<SCRIPT>

var your_message="欢迎您光临本站"   <!--显示信息的内容-->
var textfont="Verdana"             <!--显示字体-->      
var textsize=20                    <!--显示字号-->
var textcolor="8080FF"             <!--颜色设定-->
var textboldness=7                 <!--字体粗细-->
var tempo=200                       <!--延时长短-->
var stepx=20                       <!--移动的步长，分水平和垂直方向的-->
var stepy=15
var msg=new Array()
var msg=your_message              <!--将要显示的内容赋给msg-->
var message=msg.split("")         <!--将msg在空格处拆分-->
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++) {  <!--初始化，每个字符的x、y坐标均为0-->
    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() {               <!--设定延时为2s-->
    var firsttimer= setTimeout("setValues2()",2000)
}

function setValues2() {
	if (document.all) {                                 <!--如果是IE浏览器-->
    	marginbottom = document.body.clientHeight-5     <!--设定显示的底边和右边-->
    	marginright = document.body.clientWidth-5
		for (i=0;i<=numberofletters;i++) {             
			var thisspan = eval("document.all.span"+i)
    		thisspan.innerHTML=spancontent[i]           <!--将spancontent的值返回给thisspan-->
			var thisspan = eval("document.all.span"+(i)+".style")
           	thisspan.posLeft=0                          <!--将位置确定为左上角-->
			thisspan.postop=0  
		}
		moveball()                                      <!--文字开始移动-->
	}
	
	
}

function randommaker(range) {		                      <!--产生随机数-->
	rand=Math.floor(range*Math.random())
    return rand
}

function moveball() {                                    <!--使文字移动的函数-->
	if (document.all) {                                  <!--如果是IE浏览器-->
		checkposition()                                  <!--调用checkposition函数，检查位置并给予必要的调整-->
   		makesnake()                                      <!--调用makesnake函数-->
   		document.all.span0.style.posTop+=stepy           <!--改变垂直方向上的位置值-->
    	timer=setTimeout("moveball()",tempo)              <!--延时40ms-->
	}
	
}

function makesnake() {
		for (i=numberofletters; i>=1; i--) {               <!--循环，使得第i个字符占据第i－1个字符的位置-->
   			xpos[i]=xpos[i-1]
			ypos[i]=ypos[i-1]
    	}
		if (document.all) {                                          <!--如果是IE浏览器-->
			xpos[0]=document.all.span0.style.posLeft+stepx            <!--确定第1个字符的位置-->
			ypos[0]=document.all.span0.style.posTop+stepy
			for (i=0;i<=numberofletters;i++) {                        <!--对于每个字符-->
    			var thisspan=eval("document.all.span"+(i)+".style")
    			thisspan.posLeft=xpos[i]                              <!--将更新后的x、y坐标赋给thisspan-->
				thisspan.posTop=ypos[i]
    		}
		}
		
}

function checkposition() {
	if (document.all) {                                         <!--如果是IE浏览器-->
		if (document.all.span0.style.posLeft>marginright) {     <!--如果位置超出右边界-->
			stepx=(stepx+randommaker(2))*-1                      <!--更新横坐标步长值-->
			document.all.span0.style.posLeft-=1                  <!--posLeft减1-->
		}
		if (document.all.span0.style.posLeft<marginleft) {       <!--如果位置超出左边界-->
			stepx=(stepx+randommaker(2))*-1                      <!--更新横坐标步长值-->
			document.all.span0.style.posLeft+=1                  <!--posLeft加1-->
		}	
		if (document.all.span0.style.posTop>marginbottom) {       <!--如果位置超过底部-->
			stepy=(stepy+randommaker(2))*-1                       <!--更新纵坐标步长值-->
			document.all.span0.style.posTop-=1                    <!--posTop减1-->
		}
		if (document.all.span0.style.posTop<margintop) {          <!--如果位置超出顶部-->
			stepy=(stepy+randommaker(2))*-1                       <!--更新纵坐标步长值-->
			document.all.span0.style.posTop+=1                    <!--posTop加1-->
		}
	}
	
}

</SCRIPT>

<SCRIPT>

for (i=0;i<=numberofletters;i++) {                                               <!--显示上面定义的字符串-->
    document.write("<span id='span"+i+"' style='position:absolute'></span>")
    document.close()                                                              <!--关闭显示-->
}


</SCRIPT>


<body  onload=setValues()>



<!--本案例实现了文字飞舞的效果-->
<!--主要是通过moveball函数来实现的-->
<!--关键是设定显示位置的变化规律，变化频率等-->
<!--对于一些特殊位置，使用checkposition函数来进行处理-->