注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML图片代码——图片渐显渐隐效果制作  

2011-05-30 22:42:56|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

HTML

图片渐显渐隐效果制作

 

图片渐显渐隐效果制作博文简介

 

 
  • 本代码制作是透明滤镜filter:chroma和移动代码的结合。

  • 需要指出的是透明属性filter:chroma这种透明色滤镜对于某些图片格式不适用的。例如:JPEG格式的图片是一种已经减色和压缩处理的图片,所以要设置其中某种颜色透明十分困难。此外,每张图片只能指定一种透明色,对于已设置另外的色为透明色的BMP、GIF等格式的图片,再设置透明色时,原先透明而不可见的颜色会重新显示出来。

  • 让这个透明的图片在背景图片background上面移动起来,移动过后单元格内的背景颜色bgColor=#000000呈现为黑色掩盖总表格的图片背景。

HTML代码1

 

HTML基本代码1

<DIV align=center>
<TABLE height=高度 cellSpacing=0 cellPadding=0 width=宽度 align=center background=背景图片地址 border=0>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000>
<MARQUEE scrollAmount=2 direction=down width=宽度 height=高度>
<MARQUEE scrollAmount=2 direction=right width=宽度 height=高度>
<IMG height=高度 src="bmp格式的图片地址" width=宽度>
</MARQUEE></MARQUEE></TD>
<TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000>
<MARQUEE scrollAmount=2 direction=down width=宽度 height=高度>
<MARQUEE scrollAmount=2 width=宽度 height=高度>
<IMG height=高度 src="bmp格式的图片地址" width=宽度>
</MARQUEE></MARQUEE></TD>
</TR>
<TR>
<TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000>
<MARQUEE scrollAmount=2 direction=up width=宽度 height=高度>
<MARQUEE scrollAmount=2 direction=right width=宽度 height=高度>
<IMG height=高度 src="bmp格式的图片地址" width=宽度>
</MARQUEE></MARQUEE></TD>
<TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000>
<MARQUEE scrollAmount=2 direction=up width=宽度 height=高度>
<MARQUEE scrollAmount=2 width=宽度 height=高度>
<IMG height=高度 src="bmp格式的图片地址" width=宽度>
</MARQUEE>
</MARQUEE>
</TD>
</TR>
</TBODY></TABLE>
</DIV>

 

 

HTML基本代码1说明

  • 1、表格的居中属性
    <DIV align=center>...</DIV>

  • 2、两行两列表格代码(无边框有背景图片,单元格内背景色为黑色)
    <TABLE height=高度 cellSpacing=0 cellPadding=0 width=宽度 align=center background=背景图片地址 border=0>
    <TBODY>
    <TR>
    <TD bgColor=#000000></TD>
    <TD bgColor=#000000</TD></TR>
    <TR>
    <TD bgColor=#000000></TD>
    <TD bgColor=#000000></TD></TR>
    </TBODY></TABLE>
    background=背景图片地址是我们表达的主图片,在上传的图片的width=宽度和height=高度一定要和表格的宽度和高度相同,背景图片的宽度和高度最好是相同的值,显示全面。并且背景图片的宽度和高度最好是相同的值,呈正方形特效才能显示出来。
    bgColor=#000000单元格的背景颜色为黑色,让移动透明图片显示所要表达的背景图片过后呈现黑色来加强效果。
    3、滤镜filter:chroma使指定的颜色透明代码:
    style="FILTER: chroma(color=#ffff00)" bgColor=#000000
    样式为滤掉移动代码中图片的这个颜色color=#ffff00,让移动代码中图片为无色透明并在表格里移动,显示所要表达的背景图片,移动过后呈现单元格的背景颜色bgColor=#000000黑色来加强效果。

  • 4、图片移动代码:
    四个单元格四组代码从四角向中心移动,每个单元格的宽度和高度是总表格所要表达的背景图片的宽度和高度的四分之一。
    (1)向下向右移动代码:
    <MARQUEE scrollAmount=2 direction=down width=宽度 height=高度>
    <MARQUEE scrollAmount=2 direction=right width=宽度 height=高度>
    <IMG height=高度 src="bmp格式的图片地址" width=宽度>
    </MARQUEE></MARQUEE>
    (2)向下向左移动代码:
    <MARQUEE scrollAmount=2 direction=down width=宽度 height=高度>
    <MARQUEE scrollAmount=2 width=宽度 height=高度>
    <IMG height=高度 src="bmp格式的图片地址" width=宽度>
    </MARQUEE></MARQUEE>
    (3)向上向右移动代码:
    <MARQUEE scrollAmount=2 direction=up width=宽度 height=高度>
    <MARQUEE scrollAmount=2 direction=right width=宽度 height=高度>
    <IMG height=高度 src="bmp格式的图片地址" width=宽度>
    </MARQUEE></MARQUEE>
    (4)向上向左移动代码:
    <MARQUEE scrollAmount=2 direction=up width=宽度 height=高度>
    <MARQUEE scrollAmount=2 width=宽度 height=高度>
    <IMG height=高度 src="bmp格式的图片地址" width=宽度>
    </MARQUEE></MARQUEE>
    5、移动滤镜透明图片代码:
    <IMG height=高度 src="bmp格式的图片地址" width=宽度>
    移动滤镜透明图片的宽度和高度也是背景图片的四分之一。

 

 

HTML代码1实例

<DIV align=center>
<TABLE height=400 cellSpacing=0 cellPadding=0 width=400 align=center background=http://img839.ph.126.net/mvdHqA9-3bLOMXeuzAsSDQ==/783626335164534577.jpg border=0>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000>
<MARQUEE scrollAmount=2 direction=down width=200 height=200>
<MARQUEE scrollAmount=2 direction=right width=200 height=200>
<IMG height=200 src="http://img769.ph.126.net/AtT1rTy6Qbi-ir3lvy7aPQ==/2454743271894755873.bmp" width=200>
</MARQUEE></MARQUEE></TD>
<TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000>
<MARQUEE scrollAmount=2 direction=down width=200 height=200>
<MARQUEE scrollAmount=2 width=200 height=200>
<IMG height=200 src="http://img769.ph.126.net/AtT1rTy6Qbi-ir3lvy7aPQ==/2454743271894755873.bmp" width=200>
</MARQUEE></MARQUEE></TD>
</TR>
<TR>
<TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000>
<MARQUEE scrollAmount=2 direction=up width=200 height=200>
<MARQUEE scrollAmount=2 direction=right width=200 height=200>
<IMG height=200 src="http://img769.ph.126.net/AtT1rTy6Qbi-ir3lvy7aPQ==/2454743271894755873.bmp" width=200>
</MARQUEE></MARQUEE></TD>
<TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000>
<MARQUEE scrollAmount=2 direction=up width=200 height=200>
<MARQUEE scrollAmount=2 width=200 height=200>
<IMG height=200 src="http://img769.ph.126.net/AtT1rTy6Qbi-ir3lvy7aPQ==/2454743271894755873.bmp" width=200>
</MARQUEE>
</MARQUEE>
</TD>
</TR>
</TBODY></TABLE>
</DIV>

 

 
 
实例效果
 
HTML图片代码——图片渐显渐隐效果制作 - qy-0824 - 启野的博客 HTML图片代码——图片渐显渐隐效果制作 - qy-0824 - 启野的博客
HTML图片代码——图片渐显渐隐效果制作 - qy-0824 - 启野的博客 HTML图片代码——图片渐显渐隐效果制作 - qy-0824 - 启野的博客

 

 

HTML代码2

 

HTML基本代码2

 直接在一个单元内移动透明图片的效果,值得注意的是调节好宽度和高度。
<DIV align=center>
<TABLE height=宽度 cellSpacing=0 width=宽度 background=背景图片地址 border=0>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000>
<MARQUEE scrollAmount=3 direction=down behavior=alternate width=宽度 height=高度>
<MARQUEE scrollAmount=3 direction=right behavior=alternate width=宽度 height=高度>
<IMG height=高度 src="bmp格式的图片地址" width=宽度>
</MARQUEE></MARQUEE>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

 

 

HTML基本代码2说明

  • 1、上下移动代码
    <MARQUEE scrollAmount=3 direction=down behavior=alternate width=宽度 height=高度></MARQUEE>
    上下移动的代码的宽度和高度与背景图片的宽度和高度相同。

  • 2、左右移动代码
    <MARQUEE scrollAmount=3 direction=right behavior=alternate width=宽度 height=高度></MARQUEE>
    左右移动代码的宽度与背景图片的宽度相同,但高度要比背景图片的高度小一些。

  • 3、透明图片的高度和宽度
    <IMG height=高度 src="bmp格式的图片地址" width=宽度>
    透明图片的高度和宽度均小于背景图片的宽度和高度。

 

 

HTML代码2实例

<DIV align=center>
<TABLE height=500 cellSpacing=0 width=750

background=http://img314.ph.126.net/nZpCfmgJMD6ISDDHdnoHkQ==/3888013853304573780.jpg border=0>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffff00)" bgColor=#000000>
<MARQUEE scrollAmount=3 direction=down behavior=alternate width=750 height=500>
<MARQUEE scrollAmount=3 direction=right behavior=alternate width=750 height=200>
<IMG height=200 src="http://img769.ph.126.net/AtT1rTy6Qbi-ir3lvy7aPQ==/2454743271894755873.bmp" width=600>
</MARQUEE></MARQUEE>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

 

 
 
实例效果
 
HTML图片代码——图片渐显渐隐效果制作 - qy-0824 - 启野的博客

 

 

 

 

 

  评论这张
 
阅读(3410)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017