| 使网页实现“花瓣雨”特效(图) |
|
|
| touch8 赛迪网 2002-04-20 |
由于本页面要调用特殊效果代码，所以打开会慢一些，请大家不要着急,多等待一会儿！
正值四月好天气，处处阳光明媚，春暖花开，特意制作了一幅花瓣雨的效果图，供各位欣赏.整个制作过程非常简单，仅有很少的代码。就让我们开始吧：
一.基础知识
(一)神奇的〈marquee〉
〈marquee〉这个标签只要是会做网页的人都知道它，即使是初学者也会用，以至于人们认为只能用它来做做滚动字幕，似乎没有其他用处了。其实不然，〈marquee〉不但可以让文字滚动，还可以让图片滚动，用此功能可以制作移动的幻灯片或实现全景图等效果(请参看有关文章)。另外，〈marquee〉不仅可以使对象在水平或垂直方向上滚动，还可以在倾斜方向上滚动，这个漫天飞舞的花瓣雨就是用〈marquee〉的这个特性做出来的。
下面列出了〈marquee〉的一些基本参数
〈marquee
aligh=left|center|right|top|bottom
bgcolor=#n或rgb()
direction=left|right|up|down
behavior=type
height＝n
hspace＝n
scrollamount=n
Scrolldelay=n
width=n
VSpace=n
loop＝n〉
各参数的含义：
参数名称 含义
align 是设定活动字幕的位置
direction 用于设定活动字幕的滚动方向是向左、向右、向上、向下
Behavior： 用于设定滚动的方式，主要由三种方式：behavior="scroll"表示由一端滚动到另一端
behavior="slide" 表示由一端滑动到另一端，且不再重复； behavior="alternate"表示在两端之间来回滚动
Height 用于设定滚动字幕的高度
Width 则设定滚动字幕的宽度
Hspace和vspace 分别用于设定滚动字幕的左右边框和上下边框的宽度
Scrollamount 用于设定活动字幕的滚动距离；数值越大滚动越快
scrolldelay 用于设定滚动两次之间的延迟时间，数值越大越有跳跃感
Loop： 用于设定滚动的次数，不设置该值则为无限循环
〈marquee〉标记的默认情况是向左滚动无限次，字幕高度是文本高度，滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。
也许你注意到滚动方向只要上下左右四个，没有斜方向的值可取。为了使对象倾斜滚动，我们要把〈marquee〉嵌套使用，两层甚至三层，即代码写成这样：
〈marquee...〉〈marquee...〉...〈/marquee〉〈/marquee〉
(二)特殊字符的使用
比较常用的有两种，即webdings和wingdings，输入形式为：
&+#+字符代码+;
例如：webdings字体，输入ü即显示为ü
wingdings字体，输入ÿ 即显示为? 输入|即显示| 这正是我们需要的花瓣效果。
(三)Javascript的几个基本常识
1.循环语句
基本格式
for(初始化；条件；增量)
语句集；
功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。
说明：初始化参数告诉循环的开始位置，必须赋予变量的初值；
条件：是用于判别循环停止时的条件。若条件满足，则执行循环体，否则跳出。
增量：主要定义循环控制变量在每次循环时按什么方式变化。
三个主要语句之间，必须使用分号分隔。
2.随机数的取得
today = new Date();
num = Math.abs(Math.sin(today.getTime()));
利用时间函数产生一个很大的数，再对它加以运算即可！例如：将它拿来做正弦函 数(sin)的运算，得到的数再做绝对值的运算，结果可以得到一个介于0与1间的实数。因为时间的改变是ms为单位，所以你绝不会获得相同的数字。此方法只适用于产生一个随机数，若想产生一组随机数则要做个循环。当然也可以用random获得随机数。
二.制作过程
1.准备一张背景图片，如风光摄影照片：(520x400)
2.编辑html文档
由于代码不多，也就不需要什么Dreamweaver或者Frontpage之类了，有个windows的记事本就够了。拷贝下列代码，然后粘贴到记事本保存为html文档：
〈html〉
〈head〉
〈title〉花瓣雨〈/title〉
〈/head〉
〈body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"〉
〈script language="Javascript"〉
var a=0
var b=0
var c=0
for(t=1;t<4;t++)
{
for(i=1;i<20;i++)
{
today = new Date();
a = Math.abs(Math.sin(b*today.getTime()));
b = Math.abs(Math.cos(c*today.getTime()));
c = Math.abs(Math.sin(a*today.getTime()));
document.write("〈div style='position:absolute;left:0 ;top:0; width:520;height:400'〉〈marquee direction=down height=400 Scrollamount="+i+"〉〈marquee direction=left width=520 Scrollamount="+(i+t)+" 〉〈font style='color:rgb("+250*a+","+250*b+","+250*c+");font:35px Wingdings'〉|〈/font〉〈/marquee〉〈/marquee〉〈/div〉");
}
}
〈/script〉
〈img src="back.jpg" width="520" height="400"〉
〈/body〉
〈/html〉
说明：
a.〈div〉的大小要和图片一致；
b.〈marquee〉滚动区域的大小要和图片一致；
c.内循环决定该列上花的数量；
d.外循环决定列数；
e.利用随机数获得各种色彩；
f.Scrollamount的值为循环数的值以获得各种速率的花。
|
|
|
|
|
 |
|
|
|
|
|
|
|
