前些天看一些特效介绍的时候,有看到这个就照着做了这个鼠标环绕文本的特效,目前只能在IE下实现效果。
将它分享给大家。希望对大家的学习有帮助,如果有什么问题,欢迎指正。希望和大家多交流,共同进步。
-- 只支持IE浏览器 --
<BODY bgcolor="#fef4d2"><!-- 代码开始 --><script language=JavaScript>var cx=0;//鼠标当前坐标值
var cy=0;//鼠标当前坐标值for(i=1;i<=7;i++)
{setInterval("MouseTextfollow("+i+")",100); //调用跟随函数
}function MouseTextfollow(i)//文本跟随鼠标
{var x;if(i<6)//文本1~5显示在鼠标的左边x=cx-70+i*10;//横坐标为鼠标当前坐标左边向右按标号以十像素为间隔依次排列else //文本6~7显示在鼠标的右边x=cx-35+i*10;//鼠标当前坐标右方加25~35像素//减去值越大距离鼠标越进var y=cy-10+Math.floor(Math.random()*40);//鼠标当前纵坐标减十加四十也就是从负十到正三十不等,负十加上自身高度一半,则中心点约为-20到20,正好上下浮动高度范围相同w=eval("MouseText"+i);with(w.style) //给得到的这个对象设置样式{left=x.toString()+"px"; top=y.toString()+"px"; }
}function MouseTextLocation()//获取当前的鼠标坐标
{ cx=window.event.x;cy=window.event.y;
}document.οnmοusemοve=MouseTextLocation;//onmousemove 事件会在鼠标指针移出指定的对象时发生。<!-- 在此能够更改文本的总数目 -->var MouseText=new Array(7);<!-- 这里可以按序增加文本信息 -->MouseText[1]="?";
MouseText[2]="?";
MouseText[3]="?";
MouseText[4]="?";
MouseText[5]="?";
MouseText[6]="?";
MouseText[7]="?";<!-- 在此能够更改文本的颜色 -->for(i=1;i<=7;i++)
document.write("<div id='MouseText"+i+"' style='width:20px; height:20px; position:absolute; font-size:95;'><font face='Forte' color='#FF0000'>"+MouseText[i]+"</font></div>");//循环输出包含text的divMouseTextStart();</script><!-- 代码结束 --></BODY>