JavaScript實(shí)現(xiàn)文字跟隨鼠標(biāo)特效
更新時(shí)間：2015年08月06日 15:54:52 投稿：lijiao
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)文字跟隨鼠標(biāo)特效,d代碼簡單易操作，感興趣的朋友可以參考下
本文實(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>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果的方法
- js實(shí)現(xià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之移動(dòng)端H5生成圖片解決方案講解
這篇文章主要介紹了JavaScript之移動(dòng)端H5生成圖片解決方案講解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了微信小程序生成二維碼的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)底部彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
IE與FF下javascript獲取網(wǎng)頁及窗口大小的區(qū)別詳解
本篇文章主要是對IE與FF下javascript獲取網(wǎng)頁及窗口大小的區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JS自定義功能函數(shù)實(shí)現(xiàn)動(dòng)態(tài)添加網(wǎng)址參數(shù)修改網(wǎng)址參數(shù)值
本文自定義JS功能函數(shù)可動(dòng)態(tài)添加網(wǎng)址參數(shù),修改網(wǎng)址參數(shù)值，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
js獲取網(wǎng)頁標(biāo)題2008-04-04
本文詳細(xì)講解了JS異步編程之Promise對象，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
js修改input的type屬性有些限制,今天遇到個(gè)問題一開始的時(shí)候，input的類型是text，后來變成了password類型。直觀的思路是用js修改input的type類型。但ie下這么做不可行，所以只能換個(gè)思路感興趣的朋友可以了解下2013-01-01
將圖片查詢出來之后，還需要加一個(gè)查看大圖的功能，于是就用js寫了一個(gè)方法，然后在image的onmouseover事件中調(diào)用此方法，這樣在鼠標(biāo)懸浮在小圖上面的時(shí)候，其大圖就會(huì)自動(dòng)的顯示出來。2013-03-03
JavaScript雙向鏈表實(shí)現(xiàn)LFU緩存算法
本文主要介紹了JavaScript雙向鏈表實(shí)現(xiàn)LFU緩存算法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01