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

.

.

 
 
 

日志

 
 

图 片 特 效 类 ( 2 )  

2007-11-17 15:38:43|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 


 

第一种

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977
代码:
<MARQUEE scrollAmount=3 behavior=alternate width=600 height=200><MARQUEE scrollAmount=2 direction=up width=330 height=150><IMG src="http://sucai.3lian.com/photo/1pic/1/1/217997018ar.jpg"></MARQUEE></MARQUEE></DIV>
 
说明:            direction=up  是图片向上运动的代码,运动的范围是高度(height=150)为150,宽度(width=330)为330. 粉色为图片地址,整个红色的部分是指图片横向运动的宽度和高度以及晃动的速度(scrollAmount=3,  数值越大,速度越快). 如果我们把红色的部分去掉,再把高度和宽度调整一下,那就是图片垂直向上运动,是另一种效果了.也是相当不错的.大家不妨试试看.(具体我在"图片特效类(1)"中有较详细的说明)
 

第二种

 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 代码:

<MARQUEE scrollAmount=3 behavior=alternate width="100%"><MARQUEE scrollAmount=3 width="98%"><DIV align=center><IMG height=150 src="http://sucai.3lian.com/photo/1pic/1/1/217997018ar.jpg"></DIV></MARQUEE></MARQUEE>

第三种

 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 代码:

<MARQUEE scrollAmount=3 direction=down width=400 height=100>
<DIV align=center><IMG src="
http://img.blog.163.com/photo/fMmeHYhJRiN-97zVqLANaw==/2849934139195729044.jpg"><IMG
src="
http://img.blog.163.com/photo/4u1Ys-rYyrxHPxmQ_4gXcQ==/2849934139195729047.jpg">
<IMG
src="
http://img.blog.163.com/photo/Q8mXalgJ9IbRnUtwgquQ6w==/2849934139195729041.jpg">
<IMG
src="
http://img.blog.163.com/photo/agkhafaVPiRKLitRKti52g==/3734891465974023404.jpg">
<IMG
src="
http://img.blog.163.com/photo/MF1rHzMaJNAVcNYTX1RhLQ==/4016366442684810343.jpg">
</DIV>
</MARQUEE></DIV>
<MARQUEE style="FILTER: flipv(enabled=1)" scrollAmount=3 direction=down width=400 height=100>
<DIV align=center><IMG src="
http://img.blog.163.com/photo/fMmeHYhJRiN-97zVqLANaw==/2849934139195729044.jpg"><IMG
 src="http://img.blog.163.com/photo/4u1Ys-rYyrxHPxmQ_4gXcQ==/2849934139195729047.jpg">
<IMG
src="
http://img.blog.163.com/photo/Q8mXalgJ9IbRnUtwgquQ6w==/2849934139195729041.jpg">
<IMG
 src="
http://img.blog.163.com/photo/agkhafaVPiRKLitRKti52g==/3734891465974023404.jpg">
<IMG
 src="
http://img.blog.163.com/photo/MF1rHzMaJNAVcNYTX1RhLQ==/4016366442684810343.jpg">
</DIV></MARQUEE>

说明:        1)  上面的图片移动方式其实就是由两套代码组成(蓝色部分和绿色部分), direction=down  代表图片运动的方向 down 本来是表示向下运动的, 但是由于在第二套代码中多了一个代码 style="FILTER: flipv(enabled=1)"  (表示倒影),所以 图片反倒向上去了(是倒着上去的), 

2)  我们如果单用一个代码,比如说蓝色部分,再把高度,宽度修改一下,是不是又是一种效果了?(见演示1)那末,我们再把图片的运动方向改动一下,(默认为从右向左,right表示从左向右,up表示向上).它的效果又不一样了.......(见演示2_4).你的图片如果很多的话,就把黄色的代码复制再粘贴即可.

3)  我们再把两套代码的顺序调换一下位置(绿色部分在上面.蓝色部分在下面.)它的效果是不是运动方向正好相反.

第" 2 ) " 的演示(1)                                    第四种


 

 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 第" 2 ) " 的演示(2)                           第五种


 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 代码:

<MARQUEE scrollAmount=3 direction=0 >
<DIV align=center><IMG height=200  width=300 src="
http://img.blog.163.com/photo/fMmeHYhJRiN-97zVqLANaw==/2849934139195729044.jpg"><IMG
height=200  width=300 src="
http://img.blog.163.com/photo/4u1Ys-rYyrxHPxmQ_4gXcQ==/2849934139195729047.jpg">
<IMG
height=200  width=300 src="
http://img.blog.163.com/photo/Q8mXalgJ9IbRnUtwgquQ6w==/2849934139195729041.jpg">
<IMG
height=200  width=300
src="
http://img.blog.163.com/photo/agkhafaVPiRKLitRKti52g==/3734891465974023404.jpg">
<IMG
height=200  width=300 src="
http://img.blog.163.com/photo/MF1rHzMaJNAVcNYTX1RhLQ==/4016366442684810343.jpg">
</DIV>
</MARQUEE></DIV>
说明:        由于我的图片高度不一样,故我把每个图片都设为同一个高度和宽度.放在地址的前面.

 第" 2 ) " 的演示(3)                               第六种


 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 第" 2 ) " 的演示(4)                                       第七种


 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 第" 3 ) " 的演示                                               第八种

 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977
图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 第九种

 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 代码:

<marquee behavior=alternate scrollamount=3><img  height=200  src=http://img.blog.163.com/photo/fMmeHYhJRiN-97zVqLANaw==/2849934139195729044.jpg
width=300 ></marquee>

说明:            behavior=alternate   指的是晃动的代码.

 第十种

 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 代码:

<MARQUEE direction=up behavior=alternate scrollamount=3 width=300 height=400>
<IMG height=200 src="
http://img.blog.163.com/photo/fMmeHYhJRiN-97zVqLANaw==/2849934139195729044.jpg" width=300> </P></MARQUEE>

说明:          在第九种图片晃动的基础上,我们又加上了往上动的代码(加往下动的代码也可以),同时,又给它规定了晃动的高度,限制了它的宽度,(就是黄色的部分),就成了上下晃动了,就这末简单.(红色部分是图片的尺寸).具体我在"图片特效类(1)有较详细的说明.

 第十一种

  

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 代码:

 <TABLE cellSpacing=0 cellPadding=0 width="98%" align=center border=0>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=right ><IMG style="FILTER: fliph()" src="
http://img.blog.163.com/photo/MF1rHzMaJNAVcNYTX1RhLQ==/4016366442684810343.jpg"
 width=300 height=200></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 ><IMG src="
http://img.blog.163.com/photo/MF1rHzMaJNAVcNYTX1RhLQ==/4016366442684810343.jpg"
 width=300 height=200></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=right ><IMG style="FILTER: fliph()" src="
http://img.blog.163.com/photo/MF1rHzMaJNAVcNYTX1RhLQ==/4016366442684810343.jpg
" width=300 height=200></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 ><IMG src="
http://img.blog.163.com/photo/MF1rHzMaJNAVcNYTX1RhLQ==/4016366442684810343.jpg"
width=300 height=200></MARQUEE></TD></TR></TBODY></TABLE>

 

 说明;          代码:direction=right     表示图片从中间向两面分

 第十二种:

 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 代码;

<TABLE borderColor=#FF00CC height=350 width=500 align=center background=http://img.blog.163.com/photo/lnNMIW5smtyHd6-7ZUEGyw==/1729663731887577588.jpg
 border=5>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE scrollAmount=5 direction=up width=350 height=350>
<CENTER>
<IMG src="
http://img.blog.163.com/photo/XV4NfRKdw0VymgLIS5g-CQ==/3451446164426591838.jpg">
<IMG src="
http://img.blog.163.com/photo/hwmHpzaQfmb18C5g8Wi_uA==/297519050383640071.jpg">
<IMG src="
http://img.blog.163.com/photo/hB0oEui3IuuKDZ4ZdzfJPA==/448108162924587528.jpg">
</CENTER></MARQUEE></TD></TR></TBODY></TABLE>

 

 说明:          粉色部分是大图片的地址,红色部分是小图片的地址,如果你想再加图片的话那就把代码:<IMG src="图片地址">加入到两个地址代码中间就行了.direction=up 表示图片的运行方向.(UP表示向上.默认为从右向左,right表示从左向右,down表示向下). borderColor=#FF00CC  表示图片边框的颜色. border=5 是指图片边框的厚度.scrollAmount=5  是小图片运行的速度.

 

第十三种:

 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 代码:

<TABLE borderColor=#FF0000 height=350 width=450 align=center background=http://img.blog.163.com/photo/lnNMIW5smtyHd6-7ZUEGyw==/1729663731887577588.jpg border=5>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE scrollAmount=5 direction=0 >
<CENTER><IMG height=200 src="
http://img.blog.163.com/photo/XV4NfRKdw0VymgLIS5g-CQ==/3451446164426591838.jpg" width=160>
<IMG height=200
 src="
http://img.blog.163.com/photo/XQbbZ9l7y3gAYoVmuHUDWg==/3740520965508425872.jpg" width=160>
<IMG height=200 src="
http://img.blog.163.com/photo/hwmHpzaQfmb18C5g8Wi_uA==/297519050383640071.jpg" width=160> <IMG height=200 src="http://img.blog.163.com/photo/hB0oEui3IuuKDZ4ZdzfJPA==/448108162924587528.jpg" width=160> </CENTER></MARQUEE></TD></TR></TBODY></TABLE>

 

 说明:          我把运行的方向改变了一下.同时又多加了个图片,边框的颜色换了.由于图片的高度,宽度不一样,我又给它规定了同样的高和宽.

第十四种:

 

 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 代码;

<TABLE borderColor=#00ff66 height=350 width=450 align=center background=http://img.blog.163.com/photo/lnNMIW5smtyHd6-7ZUEGyw==/1729663731887577588.jpg border=5>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE scrollAmount=5 direction=0 >
<CENTER><IMG style="FILTER: alpha(opacity=150,style=2,finishopacity=0)" height=200 src="
http://img.blog.163.com/photo/XV4NfRKdw0VymgLIS5g-CQ==/3451446164426591838.jpg" width=160>
<IMG style="FILTER: alpha(opacity=150,style=2,finishopacity=0)" height=200
 src="
http://img.blog.163.com/photo/XQbbZ9l7y3gAYoVmuHUDWg==/3740520965508425872.jpg" width=160>
<IMG style="FILTER: alpha(opacity=150,style=2,finishopacity=0)" height=200 src="
http://img.blog.163.com/photo/hwmHpzaQfmb18C5g8Wi_uA==/297519050383640071.jpg" width=160>
<IMG style="FILTER: alpha(opacity=150,style=2,finishopacity=0)" height=200 src="
http://img.blog.163.com/photo/hB0oEui3IuuKDZ4ZdzfJPA==/448108162924587528.jpg" width=160> </CENTER></MARQUEE></TD></TR></TBODY></TABLE>

 

 说明;         这是我给小图片加了朦胧代码的效果(具体解说请看"图片特效类(1)")

第十五种:

旋转的图片

原图

 

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 旋转后的图片

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 

 代码:

<P align=center><IMG style="FILTER: FlipH" height=300 src="http://img.blog.163.com/photo/TGiqOfG_Y-crNxlFEOuq7Q==/3740239490531752281.jpg" width=400 ></P>

 另外一种:

图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977 图 片 特 效 类 ( 2 ) - liumaodan.1977 - 1977

 代码:

 <IMG height=400
 src="
http://img.blog.163.com/photo/wngGn0SvPi-Tlo_Shuk0vQ==/4559331672759685939.jpg"
width=200 border=0> <IMG style="FILTER: FlipH" height=400 src="
http://img.blog.163.com/photo/wngGn0SvPi-Tlo_Shuk0vQ==/4559331672759685939.jpg"
 width=200>

 说明:           为了说明问题,我在两个图片之间留了个缝隙,如果想不留,只要把两个红色的><靠紧就行了.

 

 

  

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

历史上的今天

评论

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

页脚

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