用Dreamweaver制作有趣的图片探照灯效果
2004-11-17 22:50
549 查看
以往我们多采用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的子层。所谓子层,也就是代码是嵌套的: <div id="layer1"...><div id="layer2"...>...</div></div> 由于层layer2将被设置为可以拖动的,为了保证层在被拖动过程中始终能覆盖住层layer1,必须将层layer2的大小至少设置为layer1的两倍大,即设置为510x380;现在你明白设置层layer1的clip属性的重要性了吧:层layer2比层layer1大,用clip将层layer2出界的部分剪掉,这样才能达到预定效果。接着把r.gif插入到层layer2中,注意要插到层的中心处。然后设置层layer2的位置,由于层layer2是层layer1的子层,所以起点坐标采用相对坐标,即(-255,-190)。 全部完成后效果如下: 第三步:添加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字体是常见的两种图形字体,输入这些字体时可以先输入,然后再其后面加上数字编号。如: <font style="font:150px wingdings">|</font> 这是鲜花的图案。当然你还可以选择很多你喜爱的图案,任意组合。 你如果还有什么不明白的地方可以从这里下载实例,再慢慢研究。 |
相关文章推荐
- 参加特色教育网站评比
- 教育软件评审
- DirectX.Capture
- 有关TrueDBGrid的问题向各位大虾请教
- 一个画图类,类似ms_chart的线图,适用于科学仿真数据分析(一)
- 求助:在vc中gdi编程中如何实现图形放缩和平移?
- 像素画教程(1)
- 像素画教程(2)
- 像素画教程(3)
- Servlet 2.3过滤器编程
- 使用Spring减少代码量
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能
- 系统进程描述 [个人收集]
- 一般网站用户注册流程:(适用初学者)
- 组件制作之一(概念)
- Asp.net DataGrid control with Fixed Header and Scrollbar
- 权限管理的设计和实现
- TCP/IP与ATM设计(二)
- 分頁控制
- Work with Exceed, X-Window