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

美好宁静之光

美好的回忆从这里开始......

 
 
 

日志

 
 

朦胧图片添加falsh和图片对称的代码  

2010-03-03 07:06:34|  分类: 图片制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

<DIV align=center>
<TABLE style="FILTER: alpha(opacity=100,style=2); WIDTH: 550px;

BORDER-COLLAPSE: collapse; HEIGHT: 370px" align=center background=图片地址><TBODY><TR><TD>

<P><EMBED style="WIDTH: 500px; HEIGHT: 350px" align=right src=flash地址

type=application/x-shockwave-flash allowScriptAccess="never" allowNetworking="internal" invokeURLs="false" wmode="transparent" quality="high">

</EMBED>

<EMBED style="WIDTH: 500px; HEIGHT: 350px" align=right src=flash地址

type=application/x-shockwave-flash allowScriptAccess="never" allowNetworking="internal" invokeURLs="false" wmode="transparent" quality="high">

</EMBED></P></TD></TR></TBODY></TABLE></DIV>

代码使用说明:

1、代码中的背景图片和flash动画地址可根据个人爱好更换;

2、背景图片的宽度和高度应符合其实际尺寸,flash动画的宽度和高度最好小于图片的尺寸;

3、flash动画可增减。


效 果

 

 

 图片对称效果的代码

 

1、左右对称代码

 <P align=center>

<IMG style="FILTER: FlipH"src="图片地址"

width=250 height=360>&nbsp;&nbsp;&nbsp;&nbsp;

<IMG src="图片地址"width=250 height=360></P>

2、上下对称代码

 <P align=center>

<IMG src="图片地址"width=500 height=300><BR><BR>

<IMG style="FILTER: FlipV"src="图片地址"

width=500 height=300></P>

 

朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使

朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使

 

一、图片滤镜效果:          

所选图片地址:红色部分换上图片地址;           

http://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.jpg 

 

1. 柔化 :<img src="图片地址.jpg" style="filter:alpha(opacity=25, finishOpacity=25,style=0)">

 

 

 2. 柔边(左往右) :<img src="图片地址.jpg" style="filter:alpha(opacity=0, finishOpacity=100,style=1)">

 

 

  

 

3. 圆形柔化(外往中央):

<img src="图片地址.jpg" style="filter:alpha(opacity=100, finishOpacity=0,style=2)">

 

 

 

  4. 灰色效果 :

<img src="图片地址.jpg" style="filter: gray">

 

 

 

   

5. 左右翻轉 :

<img src="图片地址.jpg" style="filter:FlipH()">

 

 

 

 6. 发光效果 :

<div style="width: 220px; height: 214px;filter:glow(color=#ffffff, strength=6)"><img src="图片地址.jpg" ></div>

  

       

 <<

7. 投射阴影效果

<DIV style="FILTER: Shadow(color=#4A7AC9,direction=135); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="图片地址"></DIV>

 

 

 

8.附阴影效果:

<div style="filter:Dropshadow(参数);width:宽;height:高" align=center><br><img src="图片地址"></div>

参数

color             -->发光颜色

offX              -->水平位移(可正可负)

offY              -->垂直位移(可正可负)

虑镜宽=图片宽度+水平位移绝对值+10

濾鏡高=图片高度+垂直位移绝对值+10+10

范例:

<DIV style="FILTER:Dropshadow(color=#333333,offX=5,offY=5); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="http://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.jpg"></DIV>

效果:

 

 

9. 水波纹效果

<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="图片地址"></DIV>

 

 

 

10. 半透明波形

<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><img src="图片地址" style="filter:Alpha(opacity=100,finishOpacity=0,style=2)"></DIV>

 

 

 

11 图片抽丝效果

 

<BR></B><BR><BR>

<TABLE border=0>

<TBODY>

<TR>

<TD style="FILTER: wave (add=true,freq=100,lightstrength=100,phase=1,strength=1)" width=220 background=图片地址 height=375></TD></TR></TBODY></TABLE>

 

 << 

12 模糊效果:

<div style="filter:Blur(参数);width:宽;height:高" align=center><br><img src="图片地址"></div>

参数

direction        -->方向(以45度角为单位)(0、45、90、135、180、225、270、315)

虑镜宽要略大于图片宽度(建议+15)

虑镜高要略大于图片高度(建议+15+10)

范例:

<DIV style="FILTER: Blur(direction=135); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="http://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.jpg"></DIV>

效果:

 

 

13  图片雾化效果

<P align=center><TABLE border=0>

<TBODY>

<TR>

<TD style="FILTER: Alpha(opacity=100,style=2)"

width=420(图片宽度) background=(图片地址) height=296(图片高度)></TD></TR></TOBDY></TBODY></TABLE></P>

 

效果;

 

 

14   图片静态倒影

<P align=center> <IMG height=高度 src="图片地址" width=宽度><BR><IMG style="FILTER: wave

(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" height=高度 src="图片地址" width=宽度> </p>

绿色部分就是大家总问的居中代码,放在粉色代码中间的东西全部居中!

效果

 

 

15  百叶窗 

<TABLE cellSpacing=0 cellPadding=0 align=center border=0><TBODY><TR><TD style="FILTER: wave(add=true,freq=100,lightstrength=100,phase=4,strength=5)" width=240 background=(图片地址)height=280></TD></TR></TBODY></TABLE>

效果;

 

16  上下颠倒

<TABLE style="FILTER: flipv" height=450 width=630 align=center background=图片地址 border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE>

 

效果

 

17  其他特效

  <center><TABLE height=358 cellSpacing=0 cellPadding=0 width=285 border=0><TBODY><TR><TD><IMG height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_9?1149056929.jpg" width=15 border=0></TD><TD><IMG height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_3?1149056929.jpg" width=51 border=0></TD><TD width=162 background=http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_1?1149056929.jpg></TD><TD><IMG height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_7?1149056929.jpg" width=42 border=0></TD><TD><IMG height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_5?1149056929.jpg" width=15 border=0></TD></TR><TR><TD width=15 background=http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_8?1149056929.jpg></TD><TD align=middle colSpan=3><IMG height=280 src="http://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.jpg" width=240 border=0></TD><TD width=15 background=http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_6?1149056929.jpg></TD></TR><TR><TD><IMG height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_96_0?1149058124.jpg" width=15 border=0></TD><TD background=http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_96_1?1149058124.jpg colSpan=3></TD><TD><IMG height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_96_2?1149058124.jpg" width=15 border=0></TD></TR></TBODY></TABLE>

 

注意:只能更换蓝色的图片地址,其他地址不要动。

 

效果;

朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使 朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使 朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使 朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使
朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使
朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使 朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使

<<

18 左右 逐渐显示

  <center><MARQUEE scrollAmount=3 direction=right width=400 height=234><MARQUEE scrollAmount=3 width=280 height=234><DIV align=center><IMG src="http://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.jpg "></DIV></MARQUEE></MARQUEE>

 

效果;

朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使

 

 

19  上下逐渐显示

<MARQUEE scrollAmount=3 direction=up behavior=alternate height=250><MARQUEE scrollAmount=3 direction=up height=234><DIV align=center><IMG src="http://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.jpg "></DIV></MARQUEE></MARQUEE>   

 

效果;

vior=alternate height=250>

朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使

 

二、图文排列:

左图文字:<P><IMG  src="图片连接地址" height=100 width=100 align=left>文章内容<BR> <BR clear=left></P>

朦胧图片添加falsh和图片对称的代码 - 快乐天使 - 快乐天使文章内容


注:heiht width 是图片的高和宽。若,字左图右,只需把left改为right.

 

  



  评论这张
 
阅读(133)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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