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

湘贞欢迎您

对自己好点,因为一辈子不长;对身边旳人好点,因为下辈子不一定能遇见!

 
 
 

日志

 
 

图片各种移动效果代码  

2014-03-26 13:00:28|  分类: 【代码应用】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 

 图片各种移动效果代码

欢迎光临博硕英音精品网

 图片各种移动效果代码 - 蓝天 - 蓝天博客 

 


【代码说明】scrollAmount移动速度,数值越大速度越快;direction是移动方向。

向左移动效果


向左移动代码



<marquee   scrollamount="2" direction=LEFT><img src=图片地址> </marquee>

向右移动效果


客

向右移动代码



<marquee  scrollAmount=2  direction=right><img src=图片地址 ></marquee>

向上移动效果

向上移动代码


<marquee  scrollAmount=2  direction=up><img src=图片地址 width=200 height=160></marquee>

向下移动效果

向下移动代码


<marquee  scrollAmount=2  direction=down><img src=图片地址 width=200 height=160></marquee>
【代码说明】(scrollAmount移动速度,数值越大,速度越快;direction是移动方向,width图片的宽度;height图片要移动的上下距离)

来回移动效果

来回移动代码


<marquee scrollamount="2" width=100% behavior=alternate><img src="图片地址"></marquee>

分段向上移动效果

分段向上移动代码


<MARQUEE scrollAmount=2 direction=up behavior=alternate height=250><MARQUEE scrollAmount=2 direction=up height=229> <DIV align=center><IMG src="图片地址"></DIV></MARQUEE></MARQUEE>

左右摇摆向上移动效果

左右摇摆向上代码


<MARQUEE scrollAmount=2 behavior=alternate width=285 height=200>
<MARQUEE scrollAmount=2 direction=up width=280 height=200><IMG src="图片地址">
</MARQUEE></MARQUEE>

图片缓慢出现效果
【代码说明】(scrollAmount移动速度,数值越大,速度越快;direction是移动方向。

向下效果

vior=slide height=160> vior=slide height=160>

向下代码


<MARQUEE scrollAmount=3 direction=down behavior=slide height=160>
<MARQUEE scrollAmount=3 direction=up behavior=slide height=160>
<DIV align=center><IMG src="图片地址"> </DIV></MARQUEE></MARQUEE>

向上效果

vior=slide height=160> vior=slide height=160>

向上代码


<MARQUEE scrollAmount=3 direction=up  behavior=slide height=160>
<MARQUEE scrollAmount=3 direction=down behavior=slide height=160>
<DIV align=center><IMG src="图片地址">
</DIV></MARQUEE></MARQUEE>

向右效果

vior=slide> vior=slide>

向右代码


<MARQUEE scrollAmount=3 direction=right   behavior=slide >
<MARQUEE scrollAmount=3 direction=left behavior=slide>
<DIV align=center><IMG src="图片地址">
</DIV></MARQUEE></MARQUEE>

向左效果

vior=slide> vior=slide>

向左代码


<MARQUEE scrollAmount=3 direction=left behavior=slide >
<MARQUEE scrollAmount=3 direction=right behavior=slide >
<DIV align=center><IMG src="地址">
</DIV></MARQUEE></MARQUEE>

图片缓慢出现循环效果
【代码说明】(scrollAmount移动速度,数值越大,速度越快;direction是移动方向。

从上到下效果

从上到下代码


<MARQUEE scrollAmount=3 direction=down >
<MARQUEE scrollAmount=3 direction=up >
<DIV align=center><IMG src="地址">
</DIV></MARQUEE></MARQUEE>

从下到上效果

从下到上代码


<MARQUEE scrollAmount=3 direction=up >
<MARQUEE scrollAmount=3 direction=down >
<DIV align=center><IMG src="地址">
</DIV></MARQUEE></MARQUEE>

从左到右效果


从左到右代码



<MARQUEE scrollAmount=3 direction=right width=280 ><MARQUEE scrollAmount=3 direction=left width=280 ><DIV align=center><IMG src="图片地址"></DIV></MARQUEE></MARQUEE>

从右到左效果


从右到左代码



<MARQUEE scrollAmount=3 direction=left width=300 ><MARQUEE scrollAmount=3 direction=right width=300 ><DIV align=center><IMG src="图片地"></DIV></MARQUEE></MARQUEE>


多张图片移动效果
【代码说明】
在单张图片移动效果的基础上,连续插入新的图片地址代码,把代码添加在最后一个前面。

多张图片向左移动效果

多张图片向左移动代码


<marquee direction=left width=宽度> <img src="第一张图片地址"><img src="第二张图片地址"> <img src="第三张图片地址"> <img src="第四张图片地址"> </marquee>


多张图片移动加链接地址效果
【代码说明】
在多张图片移动效果的基础上,在图片地址前加上你要链接到的目的地址。

效果

代码

<MARQUEE scrollAmount=2 scrollDelay=60 direction=up width=200 height=200><DIV align=center><A href=" 第一个链接的地址" target=_blank><IMG src="第一张图片地址" width=200 border=0></A></DIV><DIV align=center><A href="第二个链接地址/" target=_blank><IMG src=" 第二张图片地址" width=200 border=0></A></DIV></MARQUEE>


图片移动加FLASH特效

效果

代码

<MARQUEE scrollAmount=3 directio="down">
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 background=图片地址 border=0>
<TBODY>
<TR>
<TD><EMBED src=FLASH地址  width=200 height=160 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" allowNetworking="internal" allowScriptAccess="never"></EMBED> </TD></TR></TBODY></TABLE> </MARQUEE>


百叶窗移动效果

效果

代码

<TABLE cellSpacing=0 cellPadding=0 width=300 align=center border=0>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=50><IMG src="第一个图片地址"></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 width=50><IMG src="第二个图片地址"></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=50><IMG src="第三个图片地址"></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 width=50><IMG src="第四个图片地址"></MARQUEE></TD></TR></TBODY></TABLE>


特殊移动效果

上下起伏移动效果






上下起伏移动代码


<marquee direction=left><marqueescrollamount="2"  behavior=alternate direction=up height=200><img src=图片地址><img src=图片地址> </marquee></marquee>



中间向两边移动效果







中间向两边移动代码

<marquee direction=left><marqueescrollamount="2"  behavior=alternate direction=up height=200><img src=图片地址><img src=图片地址> </marquee></marquee>

中间上下移动效果

中间上下移动代码

<MARQUEE scrollAmount=3 direction=up  height=100>
<CENTER>
<DIV style="FILTER: flipv"><IMG src="图片地址" width=72></DIV></CENTER></MARQUEE>
<MARQUEE scrollAmount=3 direction=down  height=100>
<CENTER>
<DIV style="FILTER: flipv"><IMG src="图片地址" width=72></DIV></CENTER></MARQUEE>

  评论这张
 
阅读(57)| 评论(4)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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