dreamweaver制作有趣的图片探照灯效果
2008-02-23 06:04:00来源：互联网 阅读 ()
下面给各位介绍制作过程：
第一步：准备图片
我们需要两张图片，一张是背景图，选择一张您喜爱的图片；另一张是用来做探照灯用的，您能够用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"> 标签： 版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com 
相关文章
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设 网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源 网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它 服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护 软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷 网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash 
热门词条
最新资讯
热门关注
热门标签
|