JavaScript實(shí)現(xiàn)文字跟隨鼠標(biāo)特效
本文實(shí)例講述了JavaScript如何實(shí)現(xiàn)文字跟隨鼠標(biāo)特效。分享給大家供大家參考。具體如下:
運(yùn)行效果圖如下:

<HTML>
<HEAD>
<TITLE>鼠標(biāo)特效--文本圍繞鼠標(biāo)</TITLE>
</HEAD>
<BODY>
<br><br>
<center>
<font color="red"><h2>鼠標(biāo)特效--文本圍繞鼠標(biāo)</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]: 這里可以設(shè)置文本的抖動(dòng)速度,數(shù)值大速度慢 -->
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]: 在此能夠更改文本的總數(shù)目 -->
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>
<!-- 案例代碼結(jié)束 -->
</BODY>
</HTML>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果的方法
- js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果的方法
- js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法
- js圖片跟隨鼠標(biāo)移動(dòng)代碼
- javascript DIV實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)
- 原生JS+HTML5實(shí)現(xiàn)跟隨鼠標(biāo)一起流動(dòng)的粒子動(dòng)畫效果
- javascript跟隨鼠標(biāo)的文字帶滾動(dòng)效果
- 使用JS實(shí)現(xiàn)氣泡跟隨鼠標(biāo)移動(dòng)的動(dòng)畫效果
- javascript跟隨鼠標(biāo)x,y坐標(biāo)移動(dòng)的字效果
- JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)事件
相關(guān)文章
Javascript 多瀏覽器兼容總結(jié)(實(shí)戰(zhàn)經(jīng)驗(yàn))
多瀏覽器兼容一直都是前端備受關(guān)注的問題,本文整理了一些實(shí)戰(zhàn)的經(jīng)驗(yàn),個(gè)人感覺還不錯(cuò),需要的朋友可以參考下2013-10-10
spirngmvc js傳遞復(fù)雜json參數(shù)到controller的實(shí)例
下面小編就為大家分享一篇spirngmvc js傳遞復(fù)雜json參數(shù)到controller的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
如何使用工具規(guī)范前端項(xiàng)目的commits與changelog技巧
這篇文章主要為大家介紹了如何使用工具規(guī)范前端項(xiàng)目的commits與changelog技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
JavaScript實(shí)現(xiàn)斗地主游戲的思路
這篇文章主要介紹了JavaScript實(shí)現(xiàn)斗地主游戲的思路的相關(guān)資料,需要的朋友可以參考下2016-02-02
JS判斷元素是否存在數(shù)組中的5種方式總結(jié)
數(shù)組是我們編程中經(jīng)常使用的的數(shù)據(jù)結(jié)構(gòu)之一,在處理數(shù)組時(shí)我們經(jīng)常需要在數(shù)組中查找特定的值,下面這篇文章主要給大家總結(jié)介紹了關(guān)于JS判斷元素是否存在數(shù)組中的5種方式,需要的朋友可以參考下2023-03-03
關(guān)于取不到由location.href提交而來的上級(jí)頁面地址的解決辦法
驗(yàn)證上級(jí)頁面來源取不到由location.href提交而來的頁面地址,搜索了一大堆沒有合適的解決辦法,突然想到通過模擬JS點(diǎn)擊鏈接的方法2009-07-07
Echarts.js實(shí)現(xiàn)水滴球和海洋效果
這篇文章介紹了Echarts.js實(shí)現(xiàn)水滴球和海洋效果的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04
JS 日期與時(shí)間戮相互轉(zhuǎn)化的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狫S 日期與時(shí)間戮相互轉(zhuǎn)化的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的, 現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
微信小程序 下拉列表的實(shí)現(xiàn)實(shí)例代碼
這篇文章主要介紹了微信小程序 下拉列表的實(shí)現(xiàn)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03

