相思资源网 Design By www.200059.com
本文实例讲述了JavaScript如何实现文字跟随鼠标特效。分享给大家供大家参考。具体如下:
运行效果图如下:
<HTML> <HEAD> <TITLE>鼠标特效--文本围绕鼠标</TITLE> </HEAD> <BODY> <br><br> <center> <font color="red"><h2>鼠标特效--文本围绕鼠标</h2></font> <hr width=300> <br><br> <!-- 案例代码开始 --> <script language=JavaScript> var cx=0; var cy=0; var val=0; function MouseTextStart(){ for(i=1;i<=7;i++) { val=setInterval("MouseTextShow(1)",20); <!-- [Step1]: 这里可以设置文本的抖动速度,数值大速度慢 --> setInterval("MouseTextfollow("+i+")",100); } } function MouseTextShow(i){ var w=eval("MouseText"+i); with(w.style) { visibility="visible"; s=parseInt(fontSize); if(s>=200)s-=100; else if(s>90&&s<=100) { s-=85; clearInterval(val); if(i<7)val=setInterval("MouseTextShow("+(i+1)+")",20); } fontSize=s; } } function MouseTextfollow(i){ var x; if(i<6)x=cx-70+i*10; else x=cx-35+i*10; var y=cy-10+Math.floor(Math.random()*40); 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.onmousemove=MouseTextLocation; <!-- [Step2]: 在此能够更改文本的总数目 --> var MouseText=new Array(7); <!-- [Step3]: 这里可以按序增加文本信息 --> MouseText[1]="脚"; MouseText[2]="本"; MouseText[3]="之"; MouseText[4]="家"; MouseText[5]="欢"; MouseText[6]="迎"; MouseText[7]="你"; <!-- [Step4]: 在此能够更改文本的颜色 --> for(i=1;i<=7;i++) document.write("<div id='MouseText"+i+"' style='width:20px; height:20px; position:absolute; font-size:1000; visibility:hidden'><font face='Forte' color='#FF0000'>"+MouseText[i]+"</font></div>"); MouseTextStart(); </script> <!-- 案例代码结束 --> </BODY> </HTML>
希望本文所述对大家的javascript程序设计有所帮助。
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无JavaScript实现文字跟随鼠标特效的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。