文字跟隨鼠標，鼠標特效

2024-09-05 12:22:24

字體：大中小

供稿：網(wǎng)友

文字跟隨鼠標，鼠標特效，將需要顯示的文字寫進數(shù)組里，將字符串分解為數(shù)組，創(chuàng)建數(shù)組以記錄每個位置的y坐標，根據(jù)瀏覽器的不同，記錄鼠標的水平位置，根據(jù)數(shù)組的數(shù)據(jù)改變每一個字所在的層的坐標，生成當(dāng)前操作對象document.spanx，30毫秒后再次根據(jù)情況調(diào)整各字符位置。

<html><head><style type="text/css">.spanstyle {COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</style><script>var x,yvar step=18				//這里是相鄰兩個字之間的間隔var flag=0var message="★武林網(wǎng)歡迎你的光臨!★"	//這里放需要顯示的文字message=message.split("")		//將字符串分解為數(shù)組var xpos=new Array()			//創(chuàng)建數(shù)組，以記錄每個位置的x坐標for (i=0;i<=message.length-1;i++) {		//給每個元素先賦一個初始值	xpos[i]=-50}var ypos=new Array()	//創(chuàng)建數(shù)組，以記錄每個位置的y坐標for (i=0;i<=message.length-1;i++) {	ypos[i]=-200}function movehandler(e){		//處理鼠標移動事件	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX	//根據(jù)瀏覽器的不同，記錄鼠標的水平位置	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY	//記錄鼠標的垂直位置	flag=1										//鼠標位置已經(jīng)改變，需要重新計算}function makesnake() {						if (flag==1 && document.all) {			//如果是IE    	for (i=message.length-1; i>=1; i--) {		//處理坐標隊列   			xpos[i]=xpos[i-1]+step		//將每一座標數(shù)據(jù)前移一格，并加上字符間距			ypos[i]=ypos[i-1]    	}		xpos[0]=x+step				//將新數(shù)據(jù)寫進坐標數(shù)據(jù)隊列尾部		ypos[0]=y		for (i=0; i<message.length-1; i++) {	    		var thisspan = eval("span"+(i)+".style")//生成當(dāng)前操作對象spanx.style    		thisspan.posLeft=xpos[i]		thisspan.posTop=ypos[i]    	}	}	else if (flag==1 && document.layers) {		//如果是NS    	for (i=message.length-1; i>=1; i--) {		//處理坐標隊列   			xpos[i]=xpos[i-1]+step		//將每一座標數(shù)據(jù)前移一格，并加上字符間距			ypos[i]=ypos[i-1]    	}		xpos[0]=x+step				//將新數(shù)據(jù)寫進坐標數(shù)據(jù)隊列尾部		ypos[0]=y		for (i=0; i<message.length-1; i++) {	//根據(jù)數(shù)組的數(shù)據(jù)改變每一個字所在的層的坐標    		var thisspan = eval("document.span"+i)	//生成當(dāng)前操作對象document.spanx    		thisspan.left=xpos[i]		thisspan.top=ypos[i]    	}	}		var timer=setTimeout("makesnake()",30)	//30毫秒后再次根據(jù)情況調(diào)整各字符位置}</script></head><body bgcolor="ffffff" onload="makesnake()"><script></script></body><br><b>這種效果是不是很酷啊？</b></br></html>

上一篇：跟隨鼠標移動的流星

下一篇：跟隨鼠標的花絮，Js鼠標跟隨特效