用Dreamweaver制作有趣的图片探照灯效果
发布时间:2005-02-02 浏览次数:1152458
作者:理想转贴自:理想帝国
以往我们多采用flash或者java等在网页上实现图片的探照灯效果,做起来相对复杂。现在我们使用功能强大的Dreamweaver可以简化很多制作过程。先看看下面作成后的效果:
下面给各位介绍制作过程:
步:准备图片
我们需要两张图片,一张是背景图,选择一张你喜爱的图片;另一张是用来做探照灯用的,你可以用fireworks等作图工具绘一圆形的图案。如下所示:
背景图(girl.jpg 尺寸255x190) 圆形图(r.gif 尺寸:60x60)
第二步:建两个层
用Dreamweaver建两个层layer1和layer2。
层layer1用来放置背景图片,所以层的大小和图片一致,即255x190,然后将图片girl.jpg插入层,或者将图片设置为背景均可;接着给层设置clip属性,clip可以使超出该层的部分被剪切掉,clip也设置成图片大小,即左上角坐标取(0,0),右下角坐标取(255,190)。设置clip属性这一步很关键。层layer1的位置任意。
层layer2是用来放探照灯的,它必须是layer1的子层。所谓子层,也是代码是嵌套的:
...
由于层layer2将被设置为可以拖动的,为了保证层在被拖动过程中始终能覆盖住层layer1,必须将层layer2的大小至少设置为layer1的两倍大,即设置为510x380;现在你明白设置层layer1的clip属性的重要性了吧:层layer2比层layer1大,用clip将层layer2出界的部分剪掉,这样才能达到预定效果。接着把r.gif插入到层layer2中,注意要插到层的中心处。然后设置层layer2的位置,由于层layer2是层layer1的子层,所以起点坐标采用相对坐标,即(-255,-190)。
全部完成后效果如下:
(其中外框为层layer2,内框为层layer1。) 第三步:添加css滤镜
先给层layer2添加mask滤镜,mask顾名思义是给layer2戴个面具,语法是:
filter:mask(color=black)
这样layer2只剩下中间那个透明的圆了。如果你觉得太黑了,可以对层layer2再加个alpha滤镜,使其微微透明,语法是:
filter:alpha(opacity=80)
,为了使探照灯具有层次感,再给图片r.gif加个alpha滤镜,style取值2,即圆形。代码是:
filter:alpha(opacity=100,style=2)
全部完成后的代码如下:
第四步:添加动画和行为
添加的动画是让探照灯来回移动,我想大家都会,这里不在多解释了,不过要注意动画的移动范围,并使其循环播放。
所要添加的行为有三个: 1.鼠标移上时动画停止播放; 2.鼠标移开时动画继续播放; 3.使层layer2可以被拖动。注意设置可以被拖动的范围,不要太大了,以防止出界。
可以再加点说明文字,全部完成后的代码是:
您想添加的文字
我们再看看下面的效果:
这是鲜花!
这是阴阳图!
这是磁盘!
这是世界地图!
这是什么玩意?!别奇怪,这是图形字体,你只要将这些图形字体取代r.gif可以了!
webdings字体和wingdings字体是常见的两种图形字体,输入这些字体时可以先输入,然后再其后面加上数字编号。如:
|
这是鲜花的图案。当然你还可以选择很多你喜爱的图案,任意组合。 你如果还有什么不明白的地方可以从这里下载实例,再慢慢研究。
业务咨询
Copyright 2003 - 2023 huinet.cn All Rights Reserved.
慧网公司 版权所有