最经典的文字跟随鼠标的JS网页特效

2024-09-05 12:22:21

字体：大中小

来源：转载

供稿：网友

文字跟随鼠标变化，文字看上去很机灵的样子，文字队列慢慢整齐起来，鼠标移向哪里，文字就滚动至哪时，有意思极了！本效果实际上比较老了，在以前就曾见到过类似效果，免费与你分享代码。

<html ><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>跟随鼠标的文字</title><style type="text/css">  .spanstyle {  	position:absolute;  	visibility:visible;  	top:-50px;  	font-size: 9 pt;  	color: #000000 ; }</style>  <script>var x,yvar step=20var flag=0var message=" 欢迎光临小站，有你需要的素材"message=message.split("")var xpos=new Array()for (i=0;i<=message.length-1;i++) {	xpos[i]=-50}var ypos=new Array()for (i=0;i<=message.length-1;i++) {	ypos[i]=-50}function handlerMM(e){	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY	flag=1}function makesnake() {	if (flag==1 && document.all) {    	for (i=message.length-1; i>=1; i--) {   			xpos[i]=xpos[i-1]+step			ypos[i]=ypos[i-1]    	}		xpos[0]=x+step		ypos[0]=y		for (i=0; i<message.length-1; i++) {    		var thisspan = eval("span"+(i)+".style")    		thisspan.posLeft=xpos[i]			thisspan.posTop=ypos[i]    	}	}	else if (flag==1 && document.layers) {    	for (i=message.length-1; i>=1; i--) {   			xpos[i]=xpos[i-1]+step			ypos[i]=ypos[i-1]    	}		xpos[0]=x+step		ypos[0]=y			for (i=0; i<message.length-1; i++) {    		var thisspan = eval("document.span"+i)    		thisspan.left=xpos[i]			thisspan.top=ypos[i]}	}		var timer=setTimeout("makesnake()",30)}</script></head><body onLoad="makesnake()" ><script>for (i=0;i<=message.length-1;i++) {    document.write("<span id='span"+i+"'class='spanstyle'>")	document.write(message[i])    document.write("</span>")}if (document.layers){	document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;</script></body></html>

上一篇：鼠标射线特效，JS网页代码

下一篇：跟随鼠标的滚动文字Js代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注