软件学堂

网游分类软件分类

JS实现特殊扩散效果

2012-11-14 来源:网络

【实例名称】

JS实现特殊扩散效果

【实例描述】

扩散是经常出现在Flash中的效果。本例学习如何使用Javascript实现扩散效果。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>标题页-学无忧(www.xue51.com)</title> <script language="javascript"> var x,y; var timer; var i_fontsize=0; var step=0; var thisx,thisy; //根据不同浏览器下的鼠标位置 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(); } } //实现特殊效果的方法 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坐标的变化 document.all.mydiv.style.posTop=thisy-(Math.floor(i_fontsize/1.4)); //Y坐标的变化 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中添加一个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">把鼠标移动到此处</a></p> </div> </body> </html>

【运行效果】

 特殊扩散效果运行效果

【难点剖析】

本例的重点在于扩散效果的实现原理。使用一个定时器随着时间的变化不断增大文本的字体,并同时改变文本的坐标值,从而实现扩散效果。本例中“step”变量用来指示字体变大的步长。

【源码下载】

为了JS代码的准确性,请点击:特殊扩散效果 进行本实例源码下载 

上一篇:网页中如何实现输入的英文自动全大写
下一篇:网站提交信息等待界面代码怎么写

相关文章