當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > JS實(shí)現(xiàn)特殊擴(kuò)散效果

JS實(shí)現(xiàn)特殊擴(kuò)散效果

2012/11/14 11:16:24作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

JS實(shí)現(xiàn)特殊擴(kuò)散效果

【實(shí)例描述】

擴(kuò)散是經(jīng)常出現(xiàn)在Flash中的效果。本例學(xué)習(xí)如何使用Javascript實(shí)現(xiàn)擴(kuò)散效果。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>標(biāo)題頁-學(xué)無憂（m.wangbatian.cn）</title>
<script language="javascript">
var x,y;
var timer;
var i_fontsize=0;
var step=0;
var thisx,thisy;
//根據(jù)不同瀏覽器下的鼠標(biāo)位置
function handlerMM(e)
{
x = (document.layers) ? e.pageX : event.clientX;
y = (document.layers) ? e.pageY : event.clientY;
}
function mydivup() 
{
if (document.all) {
thisx = x;
thisy = y;
mydivup2();
}
}
//實(shí)現(xiàn)特殊效果的方法
function mydivup2() 
{
if (i_fontsize<=1000) { 
document.all.mydiv.style.fontSize=i_fontsize;
document.all.mydiv.style.color="rgb(255,"+Math.floor(i_fontsize/6)
+","+Math.floor(i_fontsize/6)+")";
document.all.mydiv.style.posLeft=thisx-(Math.floor(i_fontsize/3)); 
 //X坐標(biāo)的變化
document.all.mydiv.style.posTop=thisy-(Math.floor(i_fontsize/1.4));
 //Y坐標(biāo)的變化
step+=2;
i_fontsize+=step;    //字體逐漸變大
timer=setTimeout("mydivup(2)",50);
}
else {
clearTimeout(timer);
i_fontsize=0;
step=0;
document.all.mydiv.style.posTop=-10000;}
}
document.onmousemove = handlerMM;
</script>
<style>
.mydivstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:5pt;
font-family:Verdana;
color:FF0000
}
.explain {
position:absolute;
top:80px; 
left:40px; 
width:300px; 
color:000000;
text-align:center;
font-size:20pt;
font-family:Times;
}
</style>
需要在body中添加一個(gè)div，代碼如下所示：
</head>
<body>
<div id="mydiv" class="mydivstyle">
<p><font color="#eec0cc"><<>>)</font></p>
</div><div id="redirection" class="explain">
<p><a target="_blank" onMouseOver="mydivup()"
href="http://www.google.com">把鼠標(biāo)移動(dòng)到此處</a></p>
</div>
</body>
</html>

【運(yùn)行效果】

 特殊擴(kuò)散效果運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)在于擴(kuò)散效果的實(shí)現(xiàn)原理。使用一個(gè)定時(shí)器隨著時(shí)間的變化不斷增大文本的字體，并同時(shí)改變文本的坐標(biāo)值，從而實(shí)現(xiàn)擴(kuò)散效果。本例中“step”變量用來指示字體變大的步長(zhǎng)。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：特殊擴(kuò)散效果 進(jìn)行本實(shí)例源碼下載