Heim > Artikel > Web-Frontend > JavaScript implementiert Text, der Mauseffekten folgt. Javascript-Fähigkeiten

JavaScript implementiert Text, der Mauseffekten folgt. Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:46:441701Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Sie Text-Folge-Maus-Effekte mithilfe von JavaScript implementieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Das Betriebseffektdiagramm sieht wie folgt aus:

<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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Beispiele für die JS-Implementierung von schwebenden Popup-Fenstern (unterstützt das Ziehen und Schließen mit der Maus)_Javascript-KenntnisseNächster Artikel：Detaillierte Beispiele für die JS-Implementierung von schwebenden Popup-Fenstern (unterstützt das Ziehen und Schließen mit der Maus)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen