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)。
全部完成后效果如下:
|