前些天看一些特效介绍的时候,有看到这个就照着做了这个鼠标环绕文本的特效,目前只能在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的div
MouseTextStart();
</script>
<!-- 代码结束 -->
</BODY>