编程(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代码的准确性,请点击:特殊扩散效果 进行本实例源码下载
使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。 |