Rumah > Artikel > hujung hadapan web > JavaScript melaksanakan teks mengikut kemahiran effect_javascript tetikus

JavaScript melaksanakan teks mengikut kemahiran effect_javascript tetikus

WBOYasal: 2016-05-16 15:46:441699semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan teks mengikut kesan tetikus menggunakan JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Rajah kesan operasi adalah seperti berikut:

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Contoh terperinci pelaksanaan JS bagi tetingkap terapung pop timbul (menyokong penyeretan dan penutupan tetikus)_kemahiran javascriptArtikel seterusnya：Contoh terperinci pelaksanaan JS bagi tetingkap terapung pop timbul (menyokong penyeretan dan penutupan tetikus)_kemahiran javascript

Artikel berkaitan

Lihat lagi