分享

☆教您制作特效图片

 春天没来 2013-05-23

方法一


方法二


方法三

方法1代码:

<table style="left: 0px; top: 0px; width: 746px; height: 750px; position: relative; z-index: 1;" border="0" cellSpacing="0" cellPadding="0" background="地址" align="center">
<tbody>
<tr>
<td><img border="0" alt="" src="http://image29.360doc.com/DownloadImg/2011/05/1512/11736715_3.jpg" width="746" height="750">
<div style="left: 0px; top: 0px; width: 373px; position: absolute;" class="divBorderStyle">
<marquee>
<table style='filter: alpha(opacity=90,style=2); background-image: url("http://image29.360doc.com/DownloadImg/2011/05/1512/11736715_3.jpg");' title="http://1969707039.qzone.qq.com/" border="0" cellSpacing="0" borderColor="#cccccc" cellPadding="0" width="746" bgColor="#aaaaaa" align="center" height="750">
<tbody>
<tr>
<td></td></tr></tbody></table></marquee></div>
<div style="left: 373px; top: 0px; width: 373px; filter: flipH; position: absolute;" class="divBorderStyle">
<marquee>
<table style='filter: alpha(opacity=100,style=2); background-image: url("http://image29.360doc.com/DownloadImg/2011/05/1512/11736715_3.jpg");' title="http://1969707039.qzone.qq.com/" border="0" cellSpacing="0" borderColor="#cccccc" cellPadding="0" width="750" bgColor="#aaaaaa" align="center" height="750">
<tbody>
<tr>
<td></td></tr></tbody></table></marquee></div>
<div style="left: 0px; top: 0px; width: 746px; position: absolute; z-index: 1;" class="divBorderStyle"><embed style="width: 746px; height: 1000px;" height="750" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="900" src="http://www.xcwhw.cn/fla/bb/hc/205.swf" allownetworking="none" allowscriptaccess="never" invokeurls="false" loop="false" menu="false" play="false" wmode="transparent"> </div></td></tr></tbody></table>
代码简析:
表格标签中设置相对定位代码,设置表格的高度与宽度,单元格中放入一个图片。图片下面设置三个块区。前两个块区中各放入一个移动标签控制的表格,表格中放入同一地址的图片;第三个块区中放入一个动画图片。
前两个块区标签中都设置绝对定位代码,块区的宽度为图片宽度的一半,高度与图片的高度相同。第二个块区标签中添加左右翻转滤镜。前两个块区的表格标签中都设置透明度滤镜,背景图片的规格与表格的规格相同。
第三个块区也设置绝对定位代码,块区的规格与表格的规格相同,放入的动画图片的规格,可以根据动画图片在其网页中显示的不同位置而选择其规格,可以等于或者大于表格的规格。
方法2代码:

<table style="left: 0px; top: 0px; width: 746px; height: 750px; position: relative; z-index: 1;" border="0" cellSpacing="0" cellPadding="0" background="地址" align="center">
<tbody>
<tr>
<td><img border="0" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width="746" height="750">
<marquee style="left: 0px; top: 0px; width: 373px; height: 750px; position: absolute;" class="divBorderStyle">
<div align="center" cellPadding="0" cellSpacing="0" border="0" borderColor="#cccccc" bgColor="#aaaaaa"><img style="filter: alpha(opacity=100,style=2);" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg"> </div></marquee>
<marquee style="left: 373px; top: 0px; width: 373px; height: 750px; filter: flipH; position: absolute;" class="divBorderStyle">
<div title="" align="center" cellPadding="0" cellSpacing="0" border="0" borderColor="#cccccc" bgColor="#aaaaaa" width="750" height="750"><img style="filter: alpha(opacity=100,style=2);" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg"> </div></marquee>
<div style="left: 0px; top: 0px; width: 746px; position: absolute; z-index: 1;" class="divBorderStyle"><embed style="width: 746px; height: 1000px;" height="750" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="900" src="http://www.xcwhw.cn/fla/bb/hc/205.swf" allownetworking="none" allowscriptaccess="never" invokeurls="false" loop="false" menu="false" play="false" wmode="transparent"> </div></td></tr></tbody></table>
代码简析:
表格标签中设置相对定位代码,设置表格的高度与宽度,单元格中放入一个图片。图片下面设置三个块区。前两个块区各由放入一个移动标签控制,块区中放入同一地址的图片,图片标签中设置透明度滤镜;第三个块区中放入一个动画图片。
两个移动标签中都设置移动屏幕的规格、绝对定位代码,第二个移动标签中添加左右翻转滤镜。移动屏幕的高度与表格的高度相同,宽度为表格宽度的一半。第一个移动标签的居上值与居左值都为0px,第二个移动标签的居上值为750px,居左值为375px。
第三个块区也设置绝对定位代码,块区的规格与表格的规格相同,放入的动画图片的规格,可以根据动画图片在其网页中显示的不同位置而选择其规格,可以等于或者大于表格的规格。
方法3代码:
<table style="left: 0px; top: 0px; width: 746px; height: 750px; position: relative; z-index: 1;" border="0" cellSpacing="0" cellPadding="0" background="地址" align="center">
<tbody>
<tr>
<td><img border="0" alt="" src="http://userimage2.360doc.com/12/0310/21/5008771_201203102147120308.jpg" width="746" height="750">
<marquee style="left: 0px; top: 0px; width: 373px; height: 750px; position: absolute;" class="divBorderStyle">
<img style="filter: alpha(opacity=100,style=2);" alt="" src="http://userimage2.360doc.com/12/0310/21/5008771_201203102147120308.jpg"> </marquee>
<marquee style="left: 373px; top: 0px; width: 373px; height: 750px; filter: flipH; position: absolute;" class="divBorderStyle">
<img style="filter: alpha(opacity=100,style=2);" alt="" src="http://userimage2.360doc.com/12/0310/21/5008771_201203102147120308.jpg"></marquee>
<div style="left: 0px; top: 0px; width: 746px; position: absolute; z-index: 1;" class="divBorderStyle"><embed style="width: 746px; height: 1000px;" height="750" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="900" src="http://www.xcwhw.cn/fla/bb/hc/205.swf" wmode="transparent" play="false" menu="false" loop="false" invokeurls="false" allowscriptaccess="never" allownetworking="none"> </div></td></tr></tbody></table>
代码简析:
方法3“删除”了方法2中两个移动标签控制的块区标签与其尾标签,使代码更加简洁。
___________________________________________

说明:

以上三种方法其显示效果都相同。代码中的图片,可以使用同一地址的图片,也可以使用不同地址的图片。

“春天没来”编撰
2013年5月23日于北京

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约