用Dreamweaver制作有趣的图片探照灯效果

类别:网站制作 点击:0 评论:0 推荐:

以往我们多采用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)。

  全部完成后效果如下:

  (其中外框为层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)

  全部完成后的代码如下:

<div id="Layer1" style="position:absolute; left:0px; top:0px; width:255px; height:190px; z-index:1; clip: rect(0 255 190 0); background-image: url(girl.jpg); layer-background-image: url(girl.jpg); border: 1px none #000000">

<div id="Layer2" style="filter:mask(color=black) alpha(opacity=80);position:absolute; width:510px; height:380px; z-index:2; left: -255px; top: -100px">
<p align="center" > <br><br><br><br><br>
<img src="r.gif" width="60" height="60" style=" filter:alpha(opacity=100,style=2)"></p>
</div>

</div>

  第四步:添加动画和行为

  添加的动画是让探照灯来回移动,我想大家都会,这里不在多解释了,不过要注意动画的移动范围,并使其循环播放。

  所要添加的行为有三个:

  1.鼠标移上时动画停止播放;
  2.鼠标移开时动画继续播放;
  3.使层layer2可以被拖动。注意设置可以被拖动的范围,不要太大了,以防止出界。

  最后可以再加点说明文字,全部完成后的代码是:

<div id="Layer1" style="cursor:crosshair;position:absolute; left:0px; top:0px; width:255px; height:190px; z-index:1; clip: rect(0 255 190 0); background-image: url(girl.jpg); layer-background-image: url(girl.jpg); border: 1px none #000000" onMouseOut="MM_timelinePlay(Timeline1)" onMouseOver="MM_timelineStop()">

<marquee behavior=scroll direction=right width=50 height=120 scrollamount=1 scrolldelay=0 ><font style="margin-top:50;writing-mode:tb-rl;font-size:9pt" face="楷体_GB2312" color=red>您想添加的文字<br> <br>
</font>
</marquee>

<div id="Layer2" style="filter:mask(color=black) alpha(opacity=80);position:absolute; width:510px; height:380px; z-index:2; left: -255px; top: -100px">
<p align="center" > <br><br><br><br><br>
<img src="r.gif" width="150" height="150" style=" filter:alpha(opacity=100,style=2)"></p>
</div>

</div>

  我们再看看下面的效果:

   这是鲜花!

   这是阴阳图!

   这是磁盘!

   这是世界地图!

  这是什么玩意?!别奇怪,这是图形字体,你只要将这些图形字体取代r.gif就可以了!

  webdings字体和wingdings字体是常见的两种图形字体,输入这些字体时可以先输入&#,然后再其后面加上数字编号。如:

  <font style="font:150px wingdings">&#124;</font>

  这是鲜花的图案。当然你还可以选择很多你喜爱的图案,任意组合。

  你如果还有什么不明白的地方可以从这里下载实例,再慢慢研究。

本文地址:http://com.8s8s.com/it/it31139.htm