收藏
下载资源下载资源 加入VIP,免费下载

js特效文本跟随鼠标移动.docx

上传人：b****4 文档编号：4239783 上传时间：2022-11-28 格式：DOCX 页数：20 大小：20.01KB
下载 相关 举报
js特效文本跟随鼠标移动.docx_第1页
第1页 / 共20页
js特效文本跟随鼠标移动.docx_第2页
第2页 / 共20页
js特效文本跟随鼠标移动.docx_第3页
第3页 / 共20页
js特效文本跟随鼠标移动.docx_第4页
第4页 / 共20页
js特效文本跟随鼠标移动.docx_第5页
第5页 / 共20页
点击查看更多>>
下载资源
资源描述

js特效文本跟随鼠标移动.docx

《js特效文本跟随鼠标移动.docx》由会员分享，可在线阅读，更多相关《js特效文本跟随鼠标移动.docx（20页珍藏版）》请在冰豆网上搜索。

js特效文本跟随鼠标移动.docx

js特效文本跟随鼠标移动

1打开新页面

鼠标特效篇--打开新页面



鼠标特效篇--打开新页面


--案例代码1开始-->

functionOpenWindow（）{

--[Step1]:

这里可以设置要打开的新页面-->

--[Step2]:

在此能够更改新窗口的参数-->

--[Step3]:

这里可以修改新窗口的宽度和高度-->

msg=open（"","NewWindow","toolbar=yes,location=no,directories=yes,status=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=420,height=240"）;

}

--案例代码1结束-->

 

--案例代码2开始-->

--[Step4]:

这里可以设置页面上显示图形的名称-->

--[Step5]:

在此能够更改图形的边界框，数值大边框粗-->

--[Step6]:

这里可以修改图形的宽度和高度-->

--案例代码2结束-->

2文本框问绕鼠标

鼠标特效篇--文本围绕鼠标



鼠标特效篇--文本围绕鼠标



--案例代码开始-->

varcx=0;

varcy=0;

varval=0;

functionMouseTextStart（）{

for（i=1;i<=7;i++）{val=setInterval（"MouseTextShow

（1）",20）;

--[Step1]:

这里可以设置文本的抖动速度，数值大速度慢-->

setInterval（"MouseTextfollow（"+i+"）",100）;}

}

functionMouseTextShow（i）{

varw=eval（"MouseText"+i）;

with（w.style）{visibility="visible";s=parseInt（fontSize）;if（s>=200）s-=100;elseif（s>90&&s<=100）{s-=85;clearInterval（val）;if（i<7）val=setInterval（"MouseTextShow（"+（i+1）+"）",20）;}

fontSize=s;}

}

functionMouseTextfollow（i）{

varx;

if（i<6）x=cx-70+i*10;

elsex=cx-35+i*10;

vary=cy-10+Math.floor（Math.random（）*40）;

w=eval（"MouseText"+i）;

with（w.style）{left=x.toString（）+"px";top=y.toString（）+"px";}

}

functionMouseTextLocation（）{

cx=window.event.x;

cy=window.event.y;

}

document.onmousemove=MouseTextLocation;

--[Step2]:

在此能够更改文本的总数目-->

varMouseText=newArray（7）;

--[Step3]:

这里可以按序增加文本信息-->

MouseText[1]="W";MouseText[2]="e";MouseText[3]="l";MouseText[4]="c";MouseText[5]="o";MouseText[6]="m";MouseText[7]="e";

--[Step4]:

在此能够更改文本的颜色-->

for（i=1;i<=7;i++）document.write（"

20px;height:

20px;position:

absolute;font-size:

1000;visibility:

hidden'>"+MouseText[i]+"

"）;

MouseTextStart（）;

--案例代码结束-->

 

3图形围绕鼠标

鼠标特效篇--图形跟随鼠标



鼠标特效篇--图形跟随鼠标



--案例代码开始-->

functionMousePicture（）{

layerRef="document.all";

styleSwitch=".style";

layerName='Picture'

eval（'varcurElement='+layerRef+'["'+layerName+'"]'）

eval（layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"'）

eval（'curElement'+styleSwitch+'.visibility="visible"'）

eval（'newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth'）

eval（'newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight'）

eval（'height=curElement'+styleSwitch+'.height'）

eval（'width=curElement'+styleSwitch+'.width'）

width=parseInt（width）

height=parseInt（height）

if（event.clientX>（document.body.clientWidth-6-width））{newleft=document.body.clientWidth+document.body.scrollLeft-6-width}

else{newleft=document.body.scrollLeft+event.clientX}

eval（'curElement'+styleSwitch+'.pixelLeft=newleft'）

if（event.clientY>（document.body.clientHeight-6-height））{newtop=document.body.clientHeight+document.body.scrollTop-6-height}

else{newtop=document.body.scrollTop+event.clientY}

eval（'curElement'+styleSwitch+'.pixelTop=newtop'）

}

document.onmousemove=MousePicture;

document.write（''）

--[Step1]:

这里可以更改跟随鼠标的图形名称-->

--[Step2]:

在此能够设置图形的宽度和高度-->

document.write（'

absolute;TOP:

0pt;LEFT:

0pt;width=150;height=50;Z-INDEX:

2;visibility:

hidden;">'）

document.write（'

'）

--案例代码结束-->

4文本跟随鼠标

鼠标特效篇--文本跟随鼠标



鼠标特效篇--文本跟随鼠标



--案例代码1开始-->

varx,y

varstep=18

varindex=0

--[Step1]:

这里可以更改跟随鼠标的文本信息-->

varmessage="鼠标特效篇--文本跟随鼠标！

！

"

message=message.split（""）

varxpos=newArray（）

for（i=0;i<=message.length-1;i++）{xpos[i]=-50}

varypos=newArray（）

for（i=0;i<=message.length-1;i++）{ypos[i]=-200}

functionMouseText（）{

if（index==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

}

elseif（index==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

}

--[Step2]:

在此能够设置文本的速度，数值大速度慢-->

vartimer=setTimeout（"MouseText（）",30）

}

functionMouseScroll（e）{

x=（document.layers）?

e.pageX:

document.body.scrollLeft+event.clientX

y=（document.layers）?

e.pageY:

document.body.scrollTop+event.clientY

index=1

}

for（i=0;i<=message.length-1;i++）{

document.write（""）

document.write（message[i]）

document.write（""）

}

if（document.layers）{document.captureEvents（Event.mousemove）;}

document.onmousemove=MouseScroll;

--案例代码1结束-->

 

--案例代码2开始-->

--[Step3]:

这里可以更改文本的颜色-->

.spanstyle{color:

#ff0033;font-family:

宋体;font-size:

10pt;position:

absolute;top:

-50px;visibility:

visible}

--案例代码2结束-->

5星星跟随鼠标

鼠标特效篇--星星跟随鼠标



鼠标特效篇--星星跟随鼠标



--案例代码1开始-->

if（!

document.layers&&!

document.all）event="test"

functionYY_MouseStar（evnt）{

if（yyns4）{if（evnt.pageX）{yy_ml=evnt.pageX;yy_mt=evnt.pageY;}}

else{yy_ml=（event.clientX+document.body.scrollLeft）;yy_mt=（event.clientY+document.body.scrollTop）;}

if（yy_tracescript）eval（yy_tracescript）

}

functionYY_LayerStar（yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep）{

if（（document.layers）||（document.all））{

with（Math）{yynextx=eval（yyfnx）}

with（Math）{yynexty=eval（yyfny）}

yycnt=（yyloop&&yycnt>=yystep*yybilder）?

0:

yycnt+yystep;

if（document.layers）{

eval（yydiv+".top="+（yynexty+yytop））

eval（yydiv+".left="+（yynextx+yyleft））}

if（document.all）{

eval（"yydiv=yydiv.replace（/.layers/gi,'.all'）"）;

eval（yydiv+".style.pixelTop="+（yynexty+yytop））;

eval（yydiv+".style.pixelLeft="+（yynextx+yyleft））;}

argStr='YY_LayerStar（'+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+'）';

if（yycnt<=yystep*yybilder）{eval（yydiv+".yyto=setTimeout（argStr,yyto）"）;}

}

}

absolute;visibility:

hidden;clip:

rect（0150500）;width:

150px;background-color:

lightyellow">

--[Step1]:

这里可以设置星星的初始位置-->

--[Step2]:

在此能够更改星星的宽度和高度-->

--[Step3]:

这里可以修改星星的背景色-->

--[Step4]:

在此能够设置星星的边界框-->

--[Step5]:

这里可以更改星星的大小-->

absolute;left:

10px;top:

50px;width:

3px;height:

3px;z-index:

1;background-color:

#19636c;border:

1pxnone#000000;clip:

rect（0330）">

absolute;left:

20px;top:

50px;width:

3px;height:

3px;z-index:

1;background-color:

#708574;border:

1pxnone#000000;clip:

rect（0330）">

absolute;left:

30px;top:

50px;width:

3px;height:

3px;z-index:

1;background-color:

#379bbf;border:

1pxnone#000000;clip:

rect（0330）">

absolute;left:

40px;top:

50px;width:

3px;height:

3px;z-index:

1;background-color:

#25184c;border:

1pxnone#000000;clip:

rect（0330）">

absolute;left:

50px;top:

50px;width:

3px;height:

3px;z-index:

1;background-color:

#31bd3c;border:

1pxnone#000000;clip:

rect（0330）">

absolute;left:

60px;top:

50px;width:

3px;height:

3px;z-index:

1;background-color:

#c11efd;border:

1pxnone#000000;clip:

rect（0330）">

--案例代码1结束-->

 

--案例代码2开始-->

varyyns4=window.Event?

true:

false;varyy_mt=0;varyy_ml=0;

document.onmousemove=YY_MouseStar;

yy_tracescript='';

if（yyns4）{document.captureEvents（Event.mousemove）;YY_MouseStar（'',',document.YY_MouseStar1'）}

YY_LayerStar（0,0,'yy_ml+cos（（15*sin（yycnt/40））+0）*150*（sin（10+yycnt/20）+0.3）','yy_mt+sin（（15*sin（yycnt/34））+0）*150*（sin（10+yycnt/20）+0.3）','document.layers[\'yyd0\']',2002,true,88,7,1）;

YY_LayerStar（0,0,'yy_ml+cos（（15*sin（yycnt/28））+30）*150*（sin（10+yycnt/20）+0.3）','yy_mt+sin（（15*sin（yycnt/9））+30）*150*（sin（10+yycnt/20）+0.3）','document.layers[\'yyd1\']',2002,true,88,7,1）;

YY_LayerStar（0,0,'yy_ml+cos（（15*sin（yycnt/16））+60）*150*（sin（10+yycnt/20）+0.3）','yy_mt+sin（（15*sin（yycnt/16））+60）*150*（sin（10+yycnt/20）+0.3）','document.layers[\'yyd2\']',2002,true,88,7,1）;

YY_LayerStar（0,0,'yy_ml+cos（（15*sin（yycnt/7））+90）*150*（sin（10+yycnt/20）+0.3）','yy_mt+sin（（15*sin（yycnt/44））+90）*150*（sin（10+yycnt/20）+0.3）','document.layers[\'yyd3\']',2002,true,88,7,1）;

YY_LayerStar（0,0,'yy_ml+cos（（15*si

展开阅读全文
猜你喜欢
相关搜索

当前位置：首页 > 解决方案 > 学习计划

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1