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

凤莎莎博客

欢迎朋友光临

 
 
 

日志

 
 

【转载】图片特效  

2014-04-06 22:33:59|  分类: 代码专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自清影《图片特效》

 

 

【博客制作】图片特效

 

【博客制作】图片特效 - zhwjbq冰清 - zhwjbq冰清的博客【博客制作】图片特效 - zhwjbq冰清 - zhwjbq冰清的博客【博客制作】图片特效 - zhwjbq冰清 - zhwjbq冰清的博客  

 

图片特效

素材/学海无涯   创意/冰清

 

1.图片由中间向左右相对分开:


 图片特效大全(1) - 学海无涯的博客
慧剑博主欢迎您
 图片特效大全(1) - 学海无涯的博客
学海无涯欢迎您

 
 

代码: 

<center><br><marquee width=160 height=240><img src=http://img.bimg.126.net/photo/T0Fpa7glOwMIfuJbpa4rng==/2855845113707011742.jpg width=160 height=240><font face=华文彩云 color=#FF00FF size=5><br>天下行欢迎您</font></marquee><marquee direction=right width=220 height=240><img src=http://img.bimg.126.net/photo/T0Fpa7glOwMIfuJbpa4rng==/2855845113707011742.jpg  width=160 height=240><font face=华文彩云 color=#FF00FF size=5><br>天下行欢迎您<br></marquee></font></center>

 
 
2.图片多层滚动:
  
图片特效大全(1) - 学海无涯 图片特效大全(1) - 学海无涯 图片特效大全(1) - 学海无涯 图片特效大全(1) - 学海无涯 图片特效大全(1) -学海无涯
 
 

 

代码: 

 <TABLE height=240 cellSpacing=0 cellPadding=0 width=160>

<TBODY>

<TR>

<TD align=middle>

<MARQUEE scrollAmount=2 scrollDelay=150 direction=right width=160><IMG height=240 src="http://img.bimg.126.net/photo/T0Fpa7glOwMIfuJbpa4rng==/2855845113707011742.jpg"></IMG></MARQUEE></TD>

<TD align=middle>

<MARQUEE scrollAmount=2 scrollDelay=150 direction=right width=160><IMG height=240 src="http://img.bimg.126.net/photo/T0Fpa7glOwMIfuJbpa4rng==/2855845113707011742.jpg"></IMG></MARQUEE></TD>

<TD align=middle>

<MARQUEE scrollAmount=2 scrollDelay=150 direction=right width=160><IMG height=240 src="http://img.bimg.126.net/photo/T0Fpa7glOwMIfuJbpa4rng==/2855845113707011742.jpg"></IMG></MARQUEE></TD>

<TD align=middle>

<MARQUEE scrollAmount=2 scrollDelay=150 direction=right width=160><IMG height=240 src="http://img.bimg.126.net/photo/T0Fpa7glOwMIfuJbpa4rng==/2855845113707011742.jpg"></IMG></MARQUEE></TD>

<TD align=middle>

<MARQUEE scrollAmount=2 scrollDelay=150 direction=right width=160><IMG height=240

src="http://img.bimg.126.net/photo/T0Fpa7glOwMIfuJbpa4rng==/2855845113707011742.jpg"></IMG></MARQUEE></TD

<TD align=middle>  

3.图片向左移动:

 

图片特效大全(1) - 学海无涯

 

代码:<marquee><img src=http://img.bimg.126.net/photo/F9Z_4pf-Imj5vZQ28ZNomA==/1411597008204565823.jpg><br>学海无涯欢迎您</marquee>

 

4.图片向右移动:  

 

图片特效大全(1) - 学海无涯
学海无涯欢迎您

 

 

代码:<marquee direction=right><img src= http://img.bimg.126.net/photo/F9Z_4pf-Imj5vZQ28ZNomA==/1411597008204565823.jpg width=320 height=480><br><font color=#CC00CC size=3 face=宋体><b>学海无涯欢迎您</b></font></marquee> 

 

5.图片倒影

图片特效大全(1) -学海无涯
图片特效大全(1) - 学海无涯

 

 

代码:<center><IMG src=http://img.bimg.126.net/photo/O0nOuHi1ZQ_TA3ovl6FDzA==/2283043536100248535.jpg width="200" height="200"><BR>

<IMG src="http://img.bimg.126.net/photo/O0nOuHi1ZQ_TA3ovl6FDzA==/2283043536100248535.jpg" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30)  blur() flipv()" width="200" height="200"></center>

 

    6.图片左右颠倒:

 

 

图片特效大全(1) -学海无涯 图片特效大全(1) - 学海无涯

 

 

 

代码:

<center><img src="http://img.blog.163.com/photo/Q2W2VbYfTdU-1QiV5vflKQ==/4550605948481564248.jpg" style="filter:fliph"></center>  

 

 7.图片黑白效果:
 

图片特效大全(1) -学海无涯图片特效大全(1) - 学海无涯


 

<center><img src="http://img.bimg.126.net/photo/7cbzHirMncvzkJFZlyw7cA==/3977241420922627919.jpg" style="filter:'gray'"></center>

8.图片在背景图上的飘动:

 

图片特效大全(1) - 学海无涯

 

  

代码:

</FONT></P>

<P>

<TABLE borderColor=#cd5c5c height=300 width=450 align=center border=3>

<TBODY>

<TR>

<TD background=http://img.bimg.126.net/photo/-EjcTHs7y6GRmWHYLPSuww==/292733975779726135.jpg>

<MARQUEE scrollAmount=3 direction=down behavior=alternate height=300>

<MARQUEE scrollAmount=3 behavior=alternate width=450>

<P align=center><FONT color=red size=6><B><IMG style="WIDTH: 100px; HEIGHT: 112px" height=85 src="http://img.bimg.126.net/photo/oMdkYpPDfQqb7gRDEMg3hw==/3736580315834248868.jpg" width=230 border=0></B></FONT></P></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE></P><TBODY><TR><TD>

<P></P>

<P style="TEXT-INDENT: 2em">

 

 

9.几个图片同时飘动:

 

 

图片特效大全(1) - 学海无涯

图片特效大全(1) - 学海无涯 图片特效大全(1) - 学海无涯

 

 

 代码:

 

<TABLE borderColor=#cd5c5c height=350 width=540 align=center border=3>

<TBODY>

<TR>

<TD width=440 background="http://img.blog.163.com/photo/iG-Qx7_wHmc035Y2ICJG3w==/1979050561253057501.jpgeight=&quot;300&quot;'">

<MARQUEE scrollAmount=3 direction=down behavior=alternate height=320>

<MARQUEE scrollAmount=3 behavior=alternate width=440><IMG src=http://img.bimg.126.net/photo/iz-k6Kor9z7M8zompIsQAA==/2826571716129387590.jpg border=0>

<P></P>

<P style="TEXT-INDENT: 2em">

<MARQUEE scrollAmount=3 behavior=alternate width=370><IMG src=http://img.bimg.126.net/photo/RR1PFSFUj7YBd6cJqXhyTA==/593912200860007943.jpg border=0>

<MARQUEE scrollAmount=3 behavior=alternate width=370><IMG src=http://img.bimg.126.net/photo/pdGQq478E-ba31WzxKrczw==/1145040205259448776.jpg border=0></MARQUEE>

<P></P></MARQUEE></P></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>

 

  10.静止图片重叠:
 

 

  代码:

<DIV align=center>&nbsp;</DIV>

<DIV align=center>

<TABLE borderColor=#000080 height=400 cellSpacing=10 cellPadding=10 width=500 align=center background=http://img.blog.163.com/photo/_Z0X5VHyOlH1e0DL9mOW8Q==/1478869527638225334. border=2>

<TBODY>

<TR>

<TD>

<P align=center>

<TABLE style="FILTER: Alpha(opacity=100,style=3)" cellSpacing=0 cellPadding=0 width=313 background=图片地址>

<TBODY>

<TR>

<TD width=313 background=http://img.bimg.126.net/photo/ymclkhYh2d5Ydt4_sjWV4Q==/5109896727205645929.jpg

height=220></TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE></DIV>

<DIV align=center>&nbsp;</DIV> 

 

1.图片向上移动:

 

 

向上移动
图片特效(2) - 学海无涯


 
 
 
代码:

<MARQUEE scrollAmount=2 direction=up>

<CENTER><FONT face=华文行楷 color=#0000ff size=5><B>向上移动</B></FONT><BR><IMG style="WIDTH: 162px; HEIGHT: 180px" height=30 src="http://img.bimg.126.net/photo/F9Z_4pf-Imj5vZQ28ZNomA==/1411597008204565823.jpg " width=90></CENTER></MARQUEE>
 
2.图片向下移动:
向下移动
图片特效(2) - 学海无涯
 
 
 
 

代码:<marquee direction=down scrollamount=5><center><font color=0000ff size=5 face=华文行楷><b>向下移动</b></font><br><img src=http://img.bimg.126.net/photo/F9Z_4pf-Imj5vZQ28ZNomA==/1411597008204565823.jpg width=150 height=200></marquee> 

 
3、上下起伏 
 
 
 
vior=alternate height=600>图片特效(2) - 学海无涯上下起伏
代码:<marquee direction=left><marquee behavior=alternate direction=up height=600><img src=http://img.bimg.126.net/photo/F9Z_4pf-Imj5vZQ28ZNomA==/1411597008204565823.jpg><img ><font color=0000ff size=3 face=华文行楷><b>上下起伏</b></font><br></b></font></marquee></marquee>
 
 

4.图片加虚线框:

 

 图片特效(2) - 学海无涯  

   

 代码:

<P> <IMG style="BORDER-RIGHT: #990000 3px dashed; BORDER-TOP: #990000 3px dashed; BORDER-LEFT: #990000 3px dashed; BORDER-BOTTOM: #990000 3px dashed" src="http://i148.photobucket.com/albums/s9/yolail/f_94vs3hj0m_aa638c2.gif">  </P>

 
5.图片加单线 框:
 
 
图片特效(2) - 学海无涯
  
 
 
 
 

代码1.(单线框)

<center><img

src="http://i148.photobucket.com/albums/s9/yolail/f_94vs3hj0m_aa638c2.gif" style="border:3 solid #ff0000"></center>

 

图片特效(2) - 学海无涯
 

代码2.(双边框)

<center><img

src="http://i148.photobucket.com/albums/s9/yolail/f_94vs3hj0m_aa638c2.gif" style="border:5 double green"></center>

 

 

代码3.(立体镜框)

 

图片特效(2) - 学海无涯

<center><img

src="http://i148.photobucket.com/albums/s9/yolail/f_94vs3hj0m_aa638c2.gif"

style="border:25 outset #ff88ff"></center>

 

 

 代码4.(凹槽框) 

 

图片特效(2) - 学海无涯

 

<center> <img src="http://i148.photobucket.com/albums/s9/yolail/f_94vs3hj0m_aa638c2.gif" style="border:25 groove green" border="0"></center>

 

代码5.(脊柱框) 

 

图片特效(2) - 学海无涯

 

<center> <img src="http://i148.photobucket.com/albums/s9/yolail/f_94vs3hj0m_aa638c2.gif"  style="border:25 ridge green" border="0"></center> 

 

代码6.(立体阴影框)

 

 

 

 

图片特效(2) - 学海无涯
 
 
 

代码6.(立体阴影框)<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)" height=100 cellSpacing=3 cellPadding=15 width=100 border=2>

<TBODY>

<TR>

<TD Align=center align=middle bgColor=#ffffff><IMG src="

http://i148.photobucket.com/albums/s9/yolail/f_94vs3hj0m_aa638c2.gif"></TD></TR></ P

 

代码7.(立状阴影框)

 

图片特效(2) - 学海无涯

<IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)" src="http://i148.photobucket.com/albums/s9/yolail/f_94vs3hj0m_aa638c2.gif">

 

6.图片的超级链接移动:  

图片特效(2) - 学海无涯 图片特效(2) - 学海无涯 图片特效(2) -学海无涯 图片特效(2) -学海无涯 图片特效(2) - 学海无涯 图片特效(2) - 学海无涯 图片特效(2) - 学海无涯 图片特效(2) - 学海无涯 图片特效(2) - 学海无涯 图片特效(2) - 学海无涯

 

代码:<MARQUEE height=250 widhth="180">

<P align=left></P>

<P align=center><IMG src="http://img.blog.163.com/photo/9C9VO-cakYK4gaay3ATclA==/2881459336587312427.jpg" width=140> <IMG src="http://img.blog.163.com/photo/d5rKRhdDpxBLYx2w7ZwiRw==/2261088487917015629.jpg" width=145> <IMG src="http://img.blog.163.com/photo/pmA3LlDahcIHbT-Q9-ERzA==/3663396821889482362.jpg" width=160> <IMG src="http://img.blog.163.com/photo/TQQbz1hpP4lIZUfz6-m81w==/1732478481654575764.jpg" width=144> <IMG src="http://img.blog.163.com/photo/OxZZqKDEsbqWm-MQl-ughQ==/1702642134123245980.jpg" width=200> <IMG src="http://img.blog.163.com/photo/yf27FHxFz5hN4Wdd0WgPNw==/3732076716206877128.jpg" width=100> <IMG src="http://img.blog.163.com/photo/QumkDks25w4i6k9vG6pl9Q==/4266597696980546820.jpg" width=129> <IMG src="http://img.blog.163.com/photo/cbX-Ha1YWuqzyEOdMDJeWw==/5109896727205559318.jpg" width=150> <IMG src="http://img.blog.163.com/photo/XSeKtivgaMgE8Y72wZgAKA==/4018899717475161095.jpg" width=120> <IMG src="http://img.blog.163.com/photo/5sNjObIr-M-FEin8PE6mCw==/4017773817568318691.jpg" width=200></P></MARQUEE> 

 

7.图片上的图片移动:  

图片特效(2) - 学海无涯图片特效(2) - 学海无涯

 

 

代码:

<TABLE cellSpacing=0 cellPadding=0 width=700 align=center background=http://img.blog.163.com/photo/r93MaHamlkyiGnUsd3zjpw==/3680003845515568876.jpg border=0>

<TBODY>

<TR>

<TD>

<TABLE cellSpacing=0 cellPadding=0 align=center border=0>

<MARQUEE scrollAmount=3 scrollDelay=30 direction=right width=350><IMG height=450 src=http://img.bimg.126.net/photo/ZT5L0FXAixrvLXxheNPuCA==/5685794529555668337.jpgwidth=700></SPAN></MARQUEE>

<MARQUEE scrollAmount=3 scrollDelay=30 width=350><IMG height=450 src=http://img.bimg.126.net/photo/ZT5L0FXAixrvLXxheNPuCA==/5685794529555668337.jpgwidth=700></SPAN></MARQUEE>

<TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE>

<P><FONT color=#ff0000 size=6> 

8、上下移动中间:

 

 

图片特效(2) - 学海无涯

图片特效(2) - 学海无涯

图片特效(2) - 学海无涯

图片特效(2) -学海无涯

图片特效(2) - 学海无涯

图片特效(2) - 学海无涯

图片特效(2) - 学海无涯

图片特效(2) - 学海无涯

图片特效(2) - 学海无涯

图片特效(2) - 学海无涯


 

<MARQUEE scrollAmount=2 direction=down><DIV align=center><IMG src="http://i64.photobucket.com/albums/h180/ally1111_2006/WOMEN/gliterlady.gif"><br><br><IMG src="http://i64.photobucket.com/albums/h180/ally1111_2006/WOMEN/gliterlady.gif"><br><br> <IMG src="http://i64.photobucket.com/albums/h180/ally1111_2006/WOMEN/gliterlady.gif"><br><br> <IMG src="http://i64.photobucket.com/albums/h180/ally1111_2006/WOMEN/gliterlady.gif"><br><br> <IMG src="http://i64.photobucket.com/albums/h180/ally1111_2006/WOMEN/gliterlady.gif"><br><br></DIV> </MARQUEE> <MARQUEE style=" FILTER: flipv(enabled=1)" scrollAmount=2 direction=down> <DIV align=center><IMG src="http://i64.photobucket.com/albums/h180/ally1111_2006/WOMEN/gliterlady.gif"><br><br> <IMG src="http://i64.photobucket.com/albums/h180/ally1111_2006/WOMEN/gliterlady.gif"><br><br> <IMG src="http://i64.photobucket.com/albums/h180/ally1111_2006/WOMEN/gliterlady.gif"><br><br> <IMG src="http://i64.photobucket.com/albums/h180/ally1111_2006/WOMEN/gliterlady.gif"><br><br> <IMG

src="http://i64.photobucket.com/albums/h180/ally1111_2006/WOMEN/gliterlady.gif"><br><br></DIV> </MARQUEE>

 9.多页面立体旋转:  

 

 代码:<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer align=middle src=http://flash.picturetrail.com/pflicks/l_cube_r.swf width=400 height=300 type=application/x-shockwave-flash loop="false" quality="high" FlashVars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&amp;ptdim=50.10&amp;ptxy=284.16&amp;img1=http://pic20.picturetrail.com:80/VOL1593/6881376/13202508/195709962.jpg&amp;img2=http://pic20.picturetrail.com:80/VOL1593/6881376/13202508/195709984.jpg&amp;img3=http://pic20.picturetrail.com:80/VOL1593/6881376/13202508/195709989.jpg&amp;img4=http://pic20.picturetrail.com:80/VOL1593/6881376/13202508/195710014.jpg" wmode="transparent" bgcolor="#ffffff" > </P>

10.图片对开移动:

 

图片特效(2) - 学海无涯 图片特效(2) - 学海无涯 图片特效(2) - 学海无涯 图片特效(2) - 学海无涯

 

<TABLE cellSpacing=0 cellPadding=0 width=500 align=center border=0> <TBODY> <TR> <TD align=middle> <MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=120><IMG src="

http://i287.photobucket.com/albums/ll149/glittergn/fairy/fairy068.gif"></MARQUEE></TD> <TD align=middle> <MARQUEE scrollAmount=1 scrollDelay=100 width=120><IMG src="

http://i287.photobucket.com/albums/ll149/glittergn/fairy/fairy068.gif"></MARQUEE></TD> <TD align=middle> <MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=120><IMG src="

http://i287.photobucket.com/albums/ll149/glittergn/fairy/fairy068.gif"></MARQUEE></TD> <TD align=middle> <MARQUEE scrollAmount=1 scrollDelay=100 width=120><IMG src="

http://i287.photobucket.com/albums/ll149/glittergn/fairy/fairy068.gif"></MARQUEE></TD></TR></TBODY></TABLE>

注: 各参数详解:

a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。

b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)

 

图片特效(2) - 学海无涯  图片特效(2) - 学海无涯

 

 

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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