IE浏览器下的JS鼠标特效（文本跟随鼠标环绕的特效）

最新推荐文章于 2024-07-23 16:20:42 发布

黑暗中跳舞的月亮

最新推荐文章于 2024-07-23 16:20:42 发布

阅读量1k

点赞数 1

分类专栏： Js 文章标签： html javascript 鼠标 ie 浏览器

本文链接：https://blog.csdn.net/Seven_Amber/article/details/62895884

版权

Js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前些天看一些特效介绍的时候，有看到这个就照着做了这个鼠标环绕文本的特效，目前只能在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>