JavaScript动态网页制作宝库

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

制作方法：
　　1、插入两张相同的图片，位置是一上一下，上面一张作原景，ID号为“img1”.下面一张作倒影用，其ID号为“img2”。
　　2、在作倒影的图片上加载CSS的FlipV（垂直翻转滤镜）、Wave（波纹滤镜）、Alpha（透明度控制）滤镜，各滤镜的参数如下面的源代码所示。完成设置后的图片标记源代码如下：
<img src="image/cssp1.jpg" width="200" height="134" ID="img2" style="filter: flipv() wave(add=1,freq=8,lightstrength=80,phase=0,strength=1) alpha(opacity=30); ">。改变alpha滤镜中的opacity参数的值，可以改变图象的透明度，该值越大，图象越不透明，也就是图象越清晰，最大值是100（完全不透明），最小值是0，完全透明，那图象可就一点也看不见了。
　　3、在网页源代码的<head>与</head>之间加上如下这样一段Javascript程序：
<SCRIPT language="javascript">

</SCRIPT>
　　这段程序没有什么复杂的地方，所以不多解释了。若想使波纹的变化加快，减少setTimeout函数中的定时毫秒数；若要使波纹的变化加大，只要减少step的初值就行了；加大K的允许最大值（在本例中是15）也能起到增大波纹变化范围的效果。
　　4、在<body>标记中加上“onload="movesy()"”事件，以使页面载入时就显示倒影效果。
　　应用本例效果要注意的两点：一是在设置Wave滤镜参数时，不要把add 参数设置为“true”；二是作倒影图片的ID号必须与Javascript程序中调用时的对象名称一致。

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

这里介绍的推拉门式菜单，故名思义，其效果就象推拉门一样，可以随意拉出推进，非常节省页面空间，你可用鼠标点击主菜单条上的任意一个主菜单项，都会缓缓地拉出一个子菜单框来，当你再次点击主菜单项时，子菜单框又缓缓地推进去，是不是很方便？（见下面的效果图）这种效果当然可以在Dreamweaver中用图层再配合时线功能来做，但那样代码比较多，我这里用自编的javascript程序，则代码要少多了。下面介绍制作方法。

　　制作思路：
　　把主菜单和各主菜单对应的子菜单分别做在不同的图层上，并把主菜单的ID号定义为“div0”，其它子菜单的ID号分别定义为“div1”、“div2”、“div3”......。子菜单的“Z_index”参数值要大于主菜单，以免主菜单把子菜单遮盖。再把所有子菜单的顶部与相应主菜单的底部对齐后，再把子菜单图层的“left”参数改为负值，使其在显示屏幕外，平时是看不见的。再用一段Javascript程序使其能动态地改变子菜单所在图层的“left”参数把它拉出来和送回原处。然后在主菜单的超级链接上加一个“onclick”事件来控制其对应的子菜单是需要拉出来还是送回去。

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

制作方法：
　　1、在dreamweaver中，按上面讲的思路用图层做好主菜单的子菜单，菜单要放什么内容及菜单项的多少可根据实际需要增减。不是使用Dreamweaver的网友可把下面的代码复制到网页源代码的<body>和</body>之间：
<div id="div0" style="position:absolute; left:12px; top:151px; width:116px; height:104px; z-index:1" >
<table width="100%" border="0" height="100%" cellpadding="0">
<tr>
<td bgcolor="#FFFFCC" height="17">
<div align="left"><a href="#" onclick=" canout(1) ;moveout(1)">主菜单1</a></div></td></tr>
<tr><td bgcolor="#99FFFF">
<div align="left"><a href="#" onclick=" canout(2) ;moveout(2)">主菜单2</a></div></td></tr>
<tr><td bgcolor="#99CCFF">
<div align="left"><a href="#" onclick=" canout(3) ;moveout(3)">主菜单3</a></div></td></tr>
<tr> <td bgcolor="#CCFFFF">
<div align="left"><a href="#" onclick=" canout(4) ;moveout(4)">主菜单4</a></div></td></tr>
<tr> <td bgcolor="#CCFFCC">
<div align="left"><a href="#" onclick=" canout(5) ;moveout(5)">主菜单5</a></div></td></tr>
</table>
</div>
<div id="div1" style="position:absolute; left:-114px; top:171px; width:114px; height:107px; z-index:2; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000"> <div align="center"><a href="#">子菜单1</a><br>
<a href="#">子菜单2</a><br>
<a href="#">子菜单3</a><br>
<a href="#">子菜单4</a><br>
<a href="#">子菜单5</a><br>
</div>
</div>
　　由于篇幅所限，这里只给出主菜单和第一个主菜单项所对应的子菜单图层代码。你可在主菜单的图层（“div0”）上通过增加（或减少）表格的行来增加（或减少）主菜单项；通过复制子菜单图层来增加子菜单，不过复制的子菜单图层中的ID号和“z-index”值要作相应更改。

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

2、在菜单代码的后面加入下面这段Javascript程序：
<script language="Javascript">
<!--
var m=5; //声明一个存放子菜单图层数的变量，当子菜单图层数不是5时，要改变这个变量的值
var can=new Array(); //声明一个数组，存放是否拉出子菜单的控制代码
var newdivleft=new Array() //声明一个数组，存放各图层新的“left”参数值
var olddivleft=new Array() //声明一个数组，存放初始的各图层“left”参数值
var margeleft=parseInt(document.all.div0.style.left); //声明存放拉出子菜单的左边距变量
for (i=0;i<=m;i++){ //获取上面声明的数组的初始值
objname=eval("document.all.div"+(i)+".style"

;
newdivleft=parseInt(objname.left);
olddivleft=newdivleft;
can=0;}
function canout(x){ //设置子菜单是拉出还是推入的控制代码，为1时拉出，为0时推入。
if (can[x]==1) can[x]=0;else can[x]=1;
}
function moveout(x){
k=x;
if (can[x]==1) { //开始拉出子菜单
newdivleft[x]+=6; //设置每次拉出6个像素
if (newdivleft[x]<(margeleft+6)) { //如果没有拉到位，可继续拉。
thisdiv=eval("document.all.div"+(x)+".style";
thisdiv.left=newdivleft[x]; //拉一次子菜单
t1=setTimeout("moveout(k)",10); //每10毫秒拉动一次子菜单
}
else
{thisdiv.left=olddivleft[0];
clearTimeout(t1);} //如果子菜单已拉到位，则清除定时函数，停止拉动子菜单。
}
else
{
if (can[x]==0){ //开始推入子菜单，方法与拉出子菜单时相同，只是方向相反。
newdivleft[x]-=6;
if (newdivleft[x]>(olddivleft[x]-5)) {
thisdiv=eval("document.all.div"+(x)+".style";
thisdiv.left=newdivleft[x];
t2=setTimeout("moveout(k)",10)} else
{clearTimeout(t2);}
}
}}
-->
</script>

　　3、在需要子菜单的主菜单项的超级链接中加上事件代码：onclick=" canout(n) ;moveout(n)"；要注意，括号中的n必须与其所对应的子菜单图层的ID号后面的数字相同。
　　在应用本文提供的程序时，各图层的ID号必须采用上面制作思路中讲的方法标识，不能采用Dreamweaver 默认的ID（Layer1、layer2等）；另外本文程序只能在IE中正常运行，在NS中要正常运行必须对程序作少量改动。

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

本文介绍的这种动态切换图片效果，具有二十三种切换样式，并不是用动画软件制作的动画，而是用Javascript制作出来的效果，是不是有点出乎你的意料。更值得一看的是它只用了廖廖几行程序代码，且变换的图片数量可以随意增加却不增加程序代码。你感到奇怪吗？继续往下看你就明白了。
　　制作思路：
　　给插入的图片加上一个ID（img1)号，以便 Javascript程序对其操作，再给图片加载一个CSS的动态滤镜revealTrans，然后用一小段Javascript程序定时不断地改变revealTrans滤镜的Transition参数值以获得不断地更换切换样式，同时通过程序不断地改变图像标记<img>的“src”（图片的地址）参数值，以获得更换图片的效果。
　　制作方法：
　　1、在网页中插入一张图片，给图片加上ID号为：img1，若改变ID号，那么在程序中也要作相应改变。再给图片加载一个revealTrans滤镜，完成后的图像标记<img>的完整代码如下：
<img id="img1" src="image/cssp1.jpg" width="200" height="134" style="filter:revealTrans(Transition=1,Duration=1.5)" >
　　滤镜中的Duration是控制切换时间（以秒计）的，本例设置的是1.5秒，若想使切换过程慢一些，可加大Duration参数的值。

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

2、在网页源代码的<head>与</head>之间插入下面这段Javascript程序代码：
<script language="JavaScript">
<!--
var k=0; //声明一个计数器变量
var imgname1="image/cssp"; //所有图片地址的前面相同的部分，要根据实际修改这个值。
var imgname2=".jpg"; //图片的文件格式，可根据实际情修改，前面那个小点不要漏了。
var imgnub=3; //要展示的图片的张数，根据实际修改此值。
function start(){ //程序主体部分
obj=eval("img1"

; //若图像标记的ID号改变，请修改括号中的字符串值。
if (obj.filters.item(0).Transition==23) // 这部分语句是用于改变切换样式，在23种样式中循环。
obj.filters.item(0).Transition=1;
else
obj.filters.item(0).transition++;
obj.filters.item(0).Apply();
if (k<imgnub) {k++; //这部分语句用于改变图像标记的src的图片地址（既含路径的文件名）。
}else {k=1;
}
obj.src=imgname1+k+imgname2;
obj.filters.item(0).Play();
setTimeout("start(1)",3000); //每三秒钟刷新一次。
}
-->
</script>
　　若要让图片在切换后停留的时间长一点，可加大定时函数setTimeout中的定时数值（以毫秒计）。

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

3、在网页源代码的<body>标记中加上onload="start()"事件，以使得在网页载入时就显示动态切换效果。
　　至此，制作结束。是不是一点都不难？！但在实际制作时应注意以下几点：
　　1、所有图片的文件名和文件格式要统一，用序号区分，如本例所用图片的文件名（含相对路径）为：image/cssp1.jpg、image/cssp2.jpg、image/cssp3.jpg；
　　2、所有图片的大小最好要一致。若图片的大小不一致，虽不影响程序的运行，但在显示时，均以插入在网页上的那张图片的大小来显示，那么，大的图片将缩小显示，小的图片放大显示，影响效果。
　　3、在修改定时器函数setTimeout中的定时时间或修改CSS的revealTrans的切换时间Duration参数的值时，要使前者的时间大于后者的时间，否则，切换过程还没有完成就又开始下一过程了，从而使人无法看清楚图片。另外要注意，定时器是以毫秒为单位计时，而滤镜是以秒为单位计时。

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

我们在制作定购单时，往往要计算客户定购物品的货款，HTML并没有提供这种在线计算的功能，但我们用Javascript程序可以实现这种在线汇总计算的功能。当然一个完整的定货单可能涉及许多表单标记，如何获取各表单标记的value值是解决问题的关键。本例的方法将告诉你如何去获得各表单元素的value值，并加以计算。你看下面这张定货单，它虽涉及多种表单元素（如单选框、复选框、单行文本框等等），但你可以随意选取物品，只要一按“计算货款”按钮，立即计算好全部货款，分毫不差。满意吧！

　　制作方法：
　　1、制作一个定货单，用表单元素制作定货单在这里不细讲了，若你不会做的话，请去看看《HTML高级进阶技巧》专题的有关文章。但在制作这种要用程序进行计算的表单有两点要注意：
　　1）所有表单元素都要给取一个确切的名字，也就是要设置好“name”参数的值，以便在程序中引用；
　　2）对于象单选框、复选框这样的供用户选择的表单元素，要把具体的值定义到它的value参数上，否则，程序在计算时无法获得实际数值，写在它边上的那个数值是给用户看，程序是无法获取的，这一点切勿忽视，否则计算结果不正确。例如：本例中两种电脑单价（5000元和7000元）的两个单选框的源代码如下：
单价： <input type="radio" name="r1" value="5000">5000元
<input type="radio" name="r1" value="7000">7000元
　　看到了吧，除了在单选框的边上要写上单价的数值，还在单选框标记中设置好value的相应数值。

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

2、在表单的后面插入下面这段程序：
<script language="JavaScript">
<!--
function jshk(){
obj=document.dhform;
var dj=0;
for (i=0;i<(obj.item.length);i++){ //查找那种单价被选中
if ((obj.item(i).checked) && (obj.item(i).name="r1"

) {dj=parseInt(obj.item(i).value);break}}
hk=parseInt(obj.t1.value); hk=hk*dj; //计算电脑的货款（数量*单价）
if (obj.c1.checked) hk+=parseInt(obj.c1.value); //如果该复选框被选中，加上该项货款。
if (obj.c2.checked) hk+=parseInt(obj.c2.value); //如果该复选框被选中，加上该项货款。
if (obj.c3.checked) hk+=parseInt(obj.c3.value); //如果该复选框被选中，加上该项货款。
if (obj.c4.checked) hk+=parseInt(obj.c4.value); //如果该复选框被选中，加上该项货款。
obj.t3.value=hk+".00";
}
//-->
</script>

　　该程序不复杂，关键的要注意以下几点：
　　1）对于所有表单元素的value参数值，它们都是字符形式，要参于计算，必须先用parseInt()函数把它转换成数值形式；
　　2）对于单选框，要先找出用户选中的是那一个单选框，然后再取其value值进行计算；
　　3）对于复选框，要逐个判断是否被选中，如果被选中，则计算，否则不计算。
　　4）对于单行文本框，一般是要求用户输入的，所以其值可直接转换后进行计算。

　　3、在“开始计算”按钮中加上一个事件：onclick="jshk()"来调用程序进行计算。
　　由于定购单的样式千变万化，所以本文的程序直接引用的可能性是很少，但不管表单如何变化，万变不离其宗，其获取表单元素value参数值的方法是相同的，所以本文介绍的方法是很实用的。

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

我们在制作调查表时，往往要限制用户的选择复选框的数量，如象本例中要求用户在九个网站中选择三个（见下图）认为最好的网站，这就要求用户选择的网站数不能大于3个，当然可以在后台通过程序来控制，但那样又慢又繁，用Javascript程序在用户端直接控制既快速又方便，在本例的效果中，一旦选择的网站数超过3个，将立即弹出一个提示窗口，告诉你选择的网站数不能超过3个。

　　本例效果的制作方法如下：
　　1、制作一个含有复选框的表单。所有复选框的“name”（名称）参数要统一，以序号区分，以便程序调用。如本例的复选框名称为：c1、c2、c3......c9。
　　2、把下面这段程序插在<head>与</head>之间，这段程序代码如下：
<script language="Javascript">
<!--
var checkboxname = "c"; //复选框名称的前缀，所有复选框的名称要统一，用序号区分。
var MaxCheckbox = 9; //复选框的个数，本例有9个，可根据需要变动。
var MaxSelected = 3; //设置最大允许选择的数量，可根据需要变动。
var Num = 0; //声明一个变量，用于存放已选的数量。
function mycheck(ctrl) { //控制选择数量的函数。
var nowCtrl; //当前复选框。
Num = 0; //统计数归零。
var i;
i = 1;
while ((i <= MaxCheckbox) && (Num <= MaxSelected)) { //循环检测已选中的复选框数量。
nowCtrl = eval("ctrl.form." + checkboxname + i);
if ((nowCtrl.checked)) { //如果已被选中，则计算器加1。
Num++;
}
i++;
}
if (Num > MaxSelected) { // 检查是否已超过了最大选择数量；
ctrl.checked = false; //如果已超过允许的最大选择数量，则取消增加的选择并弹出提示窗口。
alert("你已选择了三个网站！只有取消（再次点击）已选网站才能选其它网站。"

;
}
}
// -->
</script>

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

浏览过的版块