JavaScript动态网页制作宝库

keaide · 发表于 2006-5-25 22:48

方法三、这种方法所用代码最少，程序代码如下：
<script languae="JavaScript">
<!--
function showtime(){
now=new Date();
timestr=now.toLocaleString();
document.all["witch"].value=timestr.split(" "

[3];
ctroltime=setTimeout("showtime()",500);
}
function closetime(){
clearTimeout(ctroltime)
}
-->
</script>
　　本方法的巧妙之处是采用了字符对象的分割字符串方法（split()），它的用法格式为：string1.split(string2)
　　其作用是：将字符串string1按照string2进行分割，返回一个数组，分割后的内容按顺序放在数组中。在本方法中，就是把日期字符串按空格（" "）分割，这样分割后，时间字符串正好在数组的第四个下标变量中。由于该数组是从0开始起算的，所以把timestr.split(" "

[3];赋给文本框的value参数，若你感到这讲得太专业了，你直接把程序复制就行了。
　　表单的代码如下：
<input type="text" name="witch" size="8" value="电子表">
<input type="radio" name="radiobutton" value="radiobutton" onclick="showtime()">显示时间
<input type="radio" name="radiobutton" value="radiobutton" onclick="closetime()">关闭时间显示

　　本文电子时钟的制作方法：
　　1、用表单按文中介绍的方法制作一个时钟样式，发挥你的创意，把它做得漂亮一点，如可加上背景图片；
　　2、把程序复制在网页源代码的<head>与</head>之间，大功告成。
　　本文列举三种方法的目的是想说明，实现同样的效果，方法是多样的，一种好的方法，将大减少代码的数量，是省时省力的好事，所以我们要灵活应用我们所掌握的知识。

keaide · 发表于 2006-5-25 22:48

一段文字，每个字都在不停地变换着颜色，不停地改变大小且不停地变换位置，像一个个活泼可爱的小精灵。若是在网页上放上具有这种效果的一段文字，会使整个页面充满生气。当然，用动画做这种效果是不成问题的，但用Javascript来做要瘦小的多。下图是抓取的跳动文字瞬间图：

　　图1

　　制作方法：
　　1、先插入一个1*n表格，这里的n就是要跳动的文字数，把表格的高度定义为70px，实际上表格高度的设定原则是要大于最大的跳动文字。否则在文字跳动时，整个页面都在抖动。然后把文字写入表格中，每个单元格写一个字，由于要在程序中对每个字的属性进行操作，所以还要用<span>标记把字括起来，并给它取一个名字（在本例中是a1、a2、a3......a6），没有名字，程序无法操作。本例的文字部分代码如下：
<table width="90%" height="60" border="0" >
<tr >
<td><span id="a1">赛</span></td>
<td><span id="a2">迪</span></td>
<td><span id="a3">互</span></td>
<td><span id="a4">动</span></td>
<td><span id="a5">学</span></td>
<td><span id="a6">校</span></td>
</tr>
</table>

keaide · 发表于 2006-5-25 22:48

2、在<head>与</head>之间插入下面这段程序。程序思路：用Javascript的数学对象中的random()方法，产生一个0-1之间的随机数，并用这个随机数通过运算，获得一个在一定范围内的随机数，用这个数作为文字的颜色、大小的属性值，再用一个定时函数不断地刷新，从而获得预期效果。下面是程序源代码：
<script languae="JavaScript">
<!--
function movetext(){
document.all.a1.style.fontSize=16+Math.floor(Math.random()*24); //改变字大小
document.all.a1.style.lineHeight=1.2; //行高取文字的1.2倍。
c1=Math.floor(Math.random()*256);
c2=Math.floor(Math.random()*256);
c3=Math.floor(Math.random()*256);
document.all.a1.style.color="rgb("+c1+","+c2+","+c3+"

"; //改变文字的颜色。
document.all.a2.style.fontSize=16+Math.floor(Math.random()*24);
document.all.a2.style.lineHeight=1.2;
document.all.a2.style.color="rgb("+c2+","+c1+","+c3+"

";
document.all.a3.style.fontSize=16+Math.floor(Math.random()*24);
document.all.a3.style.lineHeight=1.2;
document.all.a3.style.color="rgb("+c3+","+c2+","+c1+"

";
document.all.a4.style.fontSize=16+Math.floor(Math.random()*24);
document.all.a4.style.lineHeight=1.2;
document.all.a4.style.color="rgb("+c2+","+c3+","+c1+"

";
document.all.a5.style.fontSize=16+Math.floor(Math.random()*24);
document.all.a5.style.lineHeight=1.2;
document.all.a5.style.color="rgb("+c1+","+c3+","+c2+"

";
document.all.a6.style.fontSize=16+Math.floor(Math.random()*24);
document.all.a6.style.lineHeight=1.2;
document.all.a6.style.color="rgb("+c3+","+c2+","+c1+"

";
timer=setTimeout("movetext()",300); //每300毫秒刷新一次。
}
-->
</script>

　　程序中的Math.random()的作用是产生一个0-1之间的随机数，那么用Math.random()*N，就可获得0-N之间的随机浮点数；Math.floor的作用是对括号内的数取一个比它小的最大整数，通过Math.floor (Math.random()*N组合，可以获得0-（N-1）之间的随机数，在本例中通过Math.floor(Math.random()*24，获得一个0-23之间的随机整数，Math.floor(Math.random()*256)可获得一个0-255之间的随机整数。这段程序比较简单，不再多作解释了。注：本例中各文字的颜色是通过改变三种颜色数值（c1、c2、c3）的顺序来达到每个文字产生随机颜色。当然也可以仿照本例中第一个文字那样用随机数来产生，但要增加不少运算工作量和代码。
　　3、在<body>标记中加入 onload="movetext()"，以便这段文字在网页载入时，就跳动起来。
　　通过本文的例子，你看用Javascript改变文字的属性多么简单，要牢记的是：在javascript中要对哪个元素操作，必须要有“名字”，也就是ID号。要产生动态效果，setTimeout(function,value)不可少。
　　另外请注意：上面的程序只能在IE中正常运行，若要在NS中正常运行，则必须改写，具体修改方法是把document.all.a1.style.改为document.layers["a1"].，其它语句仿此修改。

keaide · 发表于 2006-5-25 22:49

一段文字由页面里逐渐向外推出，在推出的过程中，颜色也在不断地变化，速度逐渐加快，而在最后又稍作停顿，产生一种动画效果，但它不是动画，是用Javascript制作的一种动态文字效果。它实际上是用不断地将文字从小到大改变来模拟出文字由远及近的推出效果的。下页是效果图：

　　图1 变化过程图

　　图2 变化过程图

　　这种效果还不错吧？想做一个吗？请看制作方法：
　　1、插入一个1*1的表格，输入文字，并用<span>把它括起来，再给它取个名字。为了使效果更好一点，在本例中还加载了一个CSS的“shadow”滤镜，使文字产生阴影的效果。本例文字部分的源代码如下：
<table width="60%" border="0" height="70">
<tr>
<td class="shadow1">
<div align="center"><span id="a1" style="font-weight:bold">黄山村夫站</span><br>
<span id="a2" >http://fym888.go.163.com</span></div>
</td>
</tr>
</table>

keaide · 发表于 2006-5-25 22:49

2、在<head>与</head>之间加入下面这段程序，源代码如下：
<script languae="JavaScript">
<!--
var i=0;
ns4=(document.layers)?true:false;
ie4=(document.all)?true:false;
function movetext(){
if (ie4) {
if (i>8)i=1;else i++;
document.all.a1.style.fontSize=i*4;
document.all.a1.style.lineHeight=1.2;
document.all.a2.style.fontSize=i*2;
document.all.a2.style.lineHeight=1.2;
c1=i*28;
document.all.a1.style.color="rgb("+c1+","+0+","+0+"

";
if (i<9) t1=setTimeout("movetext()",1000/(i*0.5));
else t1=setTimeout("movetext()",2000);
}
if (ns4) {
if (i>8)i=1;else i++;
document.a1.fontSize=i*4;
document.a1.lineHeight=1.2;
document.a2.fontSize=i*2;
document.a2.lineHeight=1.2;
c1=i*28;
document.a1.color="rgb("+c1+","+0+","+0+"

";
if (i<9) t1=setTimeout("movetext()",1000/(i*0.5));
else t1=setTimeout("movetext()",2000);
}}
-->
</script>
　　这个程序由于考虑了适应IE和NS两种浏览器，所以程序代码增加了不少。在本例中是通过不同的浏览器支持不同的对象来检测浏览器的。如：IE浏览器支持document.all而不支持document.layers，所以如果浏览器支持document.all那么它就是IE系列的浏览器（当然版本必须在3.0以上），反之亦然。
　　程序的主体部分是改变文本的属性，方法比较简单，但要注意：在有多行文本时，对象的名称不要搞乱了。程序中设置了一个记数器（“i”），当定时函数每刷新一次，记数器加1，而文字大小、颜色等属性值又是通过与计数器值（“i”）的运算得出的，所以在刷新时将会发生改变，当然不能无限制地大下去，否则很快就一个页面也放不下一个字了，在本例中计数器最大计数是“8”，一旦达到就使它回归到“1”，从而使文字从小变到大，达到一定时候，就又从头开始，就是这条语句“if (i>8)i=1;else i++;”所起的作用。
　　为了使文字在变化过程中产生一种由慢变快的效果，从而使由远及近的效果更明显一些，对定时器的时间值也进行了动态设置，这条语句“if (i<9) t1=setTimeout("movetext()",1000/(i*0.5));”就是起这种作用的。那么当文字变到最大时又多停留一下就是这条语句“else t1=setTimeout("movetext()",2000);”的作用了。你若想使最大的文字停留更长时间，只要加大定时器的毫秒数就行了，本例中是2000毫秒，也就是2秒。

　　3、在<body>标记加上onload="movetext()"以使网页加载时就显示这种效果。
　　本文的例子中，有两点值得注意：
　　1、IE和NS虽然都支持Javascript，但在具体操作的时候还是有一些区别的，要制作一种跨平台的效果就必须考虑这种区别；
　　2、定时器函数的定时时间也可以动态控制，从而可以用制作更多的特效，如：一个运动的图片可以使它时快时慢等等。

keaide · 发表于 2006-5-25 22:49

下面的这种效果够奇妙吧（由于是抓取的过程图，无法看出其动态效果）！这是一种三维文字环绕效果，环绕文字在旋转的过程中，不但文字的大小在不断地改变，以增强立体感，更为独特的是它能从被环绕的文字（或图片）后面绕过去，这才是体现三维立体的关键所在。而且文字的环绕路径也不是简单的圆形，而是一种复杂的渐变轨迹，这么复杂的动态效果，就是用Flash来做也还要费不少脑筋，不信你试试。你可能认为这种动态效果的Javascript的程序很长吧，其实不然。不仅程序不长，制作也不复杂。

　　制作方法：
　　1、插入一张图片或写入一段文字，在本例中是写入一段文字，并加载了一个CSS的“shadow”滤镜以增强效果的。
　　2、接着加上下面这段程序：
<SCRIPT language="javascript">
Text1="欢迎您的光临"; //这是用于旋转的文字，可以改你所需要的，但最好不要太长。
Balises="";
Fsize=30; //文字大小变化的参照值，改变这个数值，旋转文字的相对大小交改变。
Tleft=300; //文字旋转中心距页面左边界的距离，可修改它，以使旋转中心在指定位置。
Top=140; //文字旋转中心距页面顶部边界的距离，可修改它，以使旋转中心在指定位置。
H=170; //文字旋转半径。
v=70; //文字旋转偏离水平面的控制参数，该数值越大，偏转的角度越大。
maxv=v*2;
j=0; //给计数变量赋初值。
Decal=0.5;
Tl=Text1.length;
for (x=0;x<Tl;x++){ //动态编写HTML代码，这是本程序的巧妙之处。这里给每一个文字分配一个层。
Balises+="<DIV Id=L" + x + " STYLE='width:5;font-family: Arail;font-weight:bold;position:absolute;top:140;left:170;z-index:0'>" + Text1.charAt(x) + "</DIV>"
}
document.write (Balises);
Time=setInterval("Around()",100); //启用循环定时器
Alpha=5;
IA=0.08; //调整速度，此值越大，速度越快。
function Around(){ //修改各个文字所在图层的位置、层序号、文字的大小和颜色。
Alpha -=IA;
if (j<(maxv+1)) {v--; j++}else
if (j<(2*maxv+1)) {v++;j++} else{v--;j=1}
for (x=0;x<Tl;x++){
Alpha1=Alpha+Decal*x;
Cosine=Math.cos(Alpha1);
Ob=document.all("L"+x);
Ob.style.posLeft=Tleft+H*Math.sin(Alpha1);
Ob.style.posTop=Top+v*Math.sin(Alpha1);
Ob.style.zIndex=20*Cosine;
Ob.style.lineHeight=1;
Ob.style.fontSize=Fsize+25*Cosine;
Ob.style.color="rgb(0,"+ (137+Cosine*80) + ",0)";
}
}
</SCRIPT>

keaide · 发表于 2006-5-25 22:50

上面这段程序，有以下几点值得注意：
　　1、setInterval("function",delaytime)循环定时函数的作用是每隔一定时间，调用一次指定的函数，这是与setTimeout("function",delaytime)（定时函数）不同的，定时函数到了指定的时间，执行一次就结束了。而循环定时函数则是每隔一定时间就调用一次指定的函数，一直不停，要使它停止的话，可设置clearInterval(timename)函数。
　　2、动态编写HTML代码，这是一种巧妙的办法，既减少你敲代码的麻烦又加快了页面的下载速度。另外这也给我们增大了创作空间，你想想，你可以随时随地编写HTML代码，那不成了动态编辑网页了吗？！但这样编写的HTML代码只能临时用，一不能保存，二要占用客户端资源。
　　3、在本例的程序临时动态编写的HTML代码中，是把每个要旋转的文字分配在一个<DIV>标记，这相当于Dreamweaver3中的一个图层，这一点很要，因为图层可重叠，相互覆盖，从而可以产生一个三维空间，而它们在垂直方向的顺序是由层序号参数“zIndex”来控制的。在程序中通过“Ob.style.zIndex=20*Cosine;”语句给每个图层确定层序号，并不断地刷新，从而使得文字在旋转的过程中其层序号也在改变，使得文字时而在页面文字的后面，时而在页面文字的前面，产生一种逼真的三维效果。
　　4、本文的程序只能在IE环境中下常运行，若要在NS环境下运行，可参考《推出文字效果制作》一文中介绍的方法对上述程序稍作改动。

keaide · 发表于 2006-5-25 22:50

我们常在一些网站中看到，鼠标在网页上移到时，有一行文字、一张小图片或一个小动画总是跟着鼠标，除非把鼠标移出页面，否则，它就总是紧跟鼠标不放。你知道这种效果是怎么做出来的吗？你可能感到比较复杂。其实它是用Javascript编一段小程序来实现的，且程序也不长，也比较好理解。下面让我们来揭下它的面纱看看。
　　程序思路：图层可以用绝对坐标来确定其在页面中的位置，那么我们把图片、动画或文字放到图层上，再想办法动态获取鼠标的当前位置，再把图层移到鼠标的当前位置，那图层上的内容（图片、动画或文字）不也就移到当前鼠标的位置了吗？这样就达到了图片、动画或文字随鼠移动的目的了。

　　一、一个简单的图片、动画或文字随鼠标移动的例子
　　制作方法：
　　1、在 Dreamweaver3中，插入一个图层，在图层上写上要跟随鼠标移到的文字或图片。
　　2、在图层的属性面板上把“Layer ID”（图层的ID号）改为“div1”，以便程序操作；“T”值改为“-50”，使其初始位置在页面外；“Z-index”（层序号）值改为“50”，使其在最上层，不被其它层遮盖。完成后的图层代码如下，不是使用 Dreamweaver的网友可把代码复制到<body>标记的后面：
<div id="div1" style="position:absolute; left:250px; top:118px; width:60px; height:37px; z-index:"50"><img src="image/0050.gif" width="32" height="32">图、文跟鼠标试验</div> ，这里的图片和文字可换成你所需要的。
　　3、在<head>与</head>之间加上这样一段程序：
<SCRIPT language="javascript">

</SCRIPT>
　　只要这几行代码就能使图片或文字跟着鼠标跑，有点出乎意料吧！事实就是这么简单。当然，这是最简单的一种，你可能看到的有些网页上的效果在移动的过程比这要复杂一些，但都是在这个基础上增加一些移动的变化过程而已。
　　4、当然要使真正的效果出现，还得在<body>标记中加上触发事件调用程序，使程序动作起来。在<body>标记中加上代码：onload="move()" onmousemove="canmove()"，前一个函数的作用是在网页加载时就调用“move()”程序，使其开始刷新图层的位置坐标；后一个事件的作用是，一旦在页面上移动鼠标，就重新计算它的位置坐标。

keaide · 发表于 2006-5-25 22:50

二、稍复杂一点的效果
　　在上例的基础上稍作一些改动，可获得更好的效果，如使“欢迎光临！”这几个字不仅是分开移动，在移到新位置后，还不停地左右移动，似乎在列队欢迎。要实现移动过程的变化，就要把每个文字分开，一个图层放一个字（或一张图片），然后分开移动到新的位置。所以为了方便，用数组来存放图层的位置坐标。另外，由于图层较多，插入图层比较麻烦，也会使代码大增加，因此采用了动态编写图层代码的办法。制作方法如下：
　　1、在<head>与</head>之间插入下面这段程序：
<SCRIPT language="javascript">
<!--
var x,y
var step=20
var can=0
var information="欢迎光临！"; //在这里写入跟随鼠标移动的文字
information=information.split(""

; //把字符串拆分成单个的文字
Il=information.length; //获取字符的个数，存放在Il变量中
k=0;
var xpos=new Array() //声明一个数组，存放各图层的X位置坐标
for (i=0;i<=Il-1;i++){ //给数组赋初值
xpos=-50}
var ypos=new Array() //声明一个数组，存放各图层的Y位置坐标
for (i=0;i<=Il-1;i++){ //给数组赋初值
ypos=-50}
function canmove() {
x=document.body.scrollLeft+event.clientX;
y=document.body.scrollTop+event.clientY;
can=1; k=0;step=20}
function move() {
if (can) {
k++;
if (k<20) {step++;}else
if (k<40) {step--;}else {k=0;} //计算图层左右移动的偏移量
for (i=Il-1;i>=1;i--){ //计算各图层在新位置的X、Y坐标
xpos=xpos[i-1]+step;
ypos=ypos[i-1]}
xpos[0]=x+step;
ypos[0]=y
for (i=0;i<Il-1;i++){ //改变各图层位置的X、Y坐标，使其移到新的位置
var thisdiv=eval("div"+(i)+".style";
thisdiv.posLeft=xpos;
thisdiv.posTop=ypos}}
setTimeout("move()",30)} //每30秒刷新一次
-->
</SCRIPT>
　　2、在<body>标记的后面加上这段程序：
<script language="Javascript">

</script>
　　这段程序的作用是动态自动编写存放移动文字图层的HTML代码，并把相应的文字写在上面。
　　3、在<body>标记中加上代码：onload="move()" onmousemove="canmove()"。
　　这样在浏览器中，“欢迎光临！”这几个字就会紧跟鼠标移动，到达新位置后还会左右移动。我想现在不会再感到这种效果有什么神秘了吧？！

keaide · 发表于 2006-5-25 22:51

用 Java 的applet控件可以做出非常漂亮的水中倒影效果，这已是众所周知的事了。但是那样做出来的效果在运行时需要带上一个Java applet控件，所以体积显得比较大。而本文介绍的这种用Javascrpit做出来的水中倒影效果，却只要增加很少的几行代码就完成了，虽然效果略差一点，但看上去还是挺逼真的，你看下面这种波光粼粼的水中倒影效果，当然这里是抓取的图片，实际效果中的水波是动的。

　　本文例子制作思路：先用一个CSS的“FlipV”滤镜把图象垂直翻转产生倒影，再用一个CSS的“Wave”滤镜产生波纹，然后用一个CSS的“Alpha”滤镜使图象半透明，最后用一段Javscript程序动态不断地改变CSS的“Wave”滤镜的“freq”（波纹频率）和“strength”（波纹的振幅）参数，从而模拟出水波粼粼的效果。

[参考文档] JavaScript动态网页制作宝库

浏览过的版块