編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 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代碼的準確性,請點擊:特殊擴散效果 進行本實例源碼下載
使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。 |