分享

动态图片处理特效代码

 红尘精灵 2011-04-19

一、自右左移动

  代码格式

<DIV align=center>
<MARQUEE scrollAmount=3 direction=left width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>

     

动态图片处理特效代码 - 风语者 - Upflyhigh 的博客
动态图片处理特效代码 - 风语者 - Upflyhigh 的博客

代码说明:

(1)窗口和图片的宽度、高度的单位为像素。

(2)显示窗口宽度通常以大于等于图片宽度为宜(特长图片例外),显示窗口高度通常应等于图片高度。

(3)scrollAmount为移动速度。

 

(二)多张图片左移

  代码格式

<DIV align=center>
<MARQUEE scrollAmount=2 direction=left width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片1连接地址" width=图片宽度 height=图片高度>
<IMG src="图片2连接地址" width=图片宽度 height=图片高度>
<IMG src="图片3连接地址" width=图片宽度 height=图片高度>
<IMG src="图片4连接地址" width=图片宽度 height=图片高度>
<IMG src="图片5连接地址" width=图片宽度 height=图片高度>
<IMG src="图片6连接地址" width=图片宽度 height=图片高度>
……
<IMG src="图片N连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>
 

代码说明:(1)窗口和图片的宽度、高度的单位为像素。

(2)显示窗口宽度通常以大于等于图片宽度为宜,显示窗口高度通常应等于图片高度。

(3)多张图片之规格尺寸通常应大小一致。

(4)scrollAmount为移动速度。

二、自下上移动

(一)单张图片上移

      代码格式 

<DIV align=center>
<MARQUEE scrollAmount=3 direction=up width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>
   

动态图片处理特效代码 - 风语者 - Upflyhigh 的博客
动态图片处理特效代码 - 风语者 - Upflyhigh 的博客

代码说明:

(1)窗口和图片的宽度、高度的单位为像素。

(2)显示窗口宽度通常应等于图片宽度,显示窗口高度通常以大于等于图片高度为宜(特长图片例外)。

(3)scrollAmount为移动速度。

 

(二)多张图片上移

  代码格式

<DIV align=center>
<MARQUEE scrollAmount=3 direction=up width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片1连接地址" width=图片宽度 height=图片高度>
<IMG src="图片2连接地址" width=图片宽度 height=图片高度>
<IMG src="图片3连接地址" width=图片宽度 height=图片高度>
<IMG src="图片4连接地址" width=图片宽度 height=图片高度>
<IMG src="图片5连接地址" width=图片宽度 height=图片高度>
<IMG src="图片6连接地址" width=图片宽度 height=图片高度>
……
<IMG src="图片N连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>
 

代码说明:

(1)窗口和图片的宽度、高度的单位为像素。

(2)显示窗口宽度通常应等于图片宽度,显示窗口高度通常以大于等于图片高度为宜。

(3)多张图片之规格尺寸通常应大小一致。

(4)scrollAmount为移动速度。

倾斜移动

 代码格式

<DIV align=center>
<marquee scrollamount=5 direction=D1 height=显示窗口高度>
<DIV align=center>
<marquee scrollamount=5 direction=D2 width=显示窗口宽度><IMG src="图片连接地址" width=图片宽度 height=图片高度 border=0></marquee></DIV ></marquee></DIV>
 

代码说明:

D1=down或up,D2=left或right

左右摆动

(一)单张图片左右摆动

代码格式

<DIV align=center>
<MARQUEE scrollDelay=60 behavior=alternate width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片连接地址" width=图片宽度 height=图片高度 border=0></MARQUEE></DIV>

  

代码说明:

scrollDelay为滚动两次之间的延迟时间,数值越大越有跳跃感,可根据情况自行设定。

(二)多张图片左右摆动

代码格式

<DIV align=center>
<MARQUEE scrollDelay=60 behavior=alternate width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片1连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片2连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片3连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片4连接地址" width=图片宽度 height=图片高度 border=0>
……
<IMG src="图片n连接地址" width=图片宽度 height=图片高度 border=0>
</MARQUEE></DIV>

代码说明:

scrollDelay为滚动两次之间的延迟时间,数值越大越有跳跃感,可根据情况自行设定。

上下振动

(一)单张图片上下振动

代码格式

<DIV align=center>
<MARQUEE scrollDelay=60 direction=up behavior=alternate width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片连接地址" width=图片宽度 height=图片高度 border=0></MARQUEE></DIV>

代码说明:

scrollDelay为滚动两次之间的延迟时间,数值越大越有跳跃感,可根据情况自行设定。

(二)多张图片上下振动

代码格式

<DIV align=center>
<MARQUEE scrollDelay=60 direction=up behavior=alternate width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片1连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片2连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片3连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片4连接地址" width=图片宽度 height=图片高度 border=0>
……
<IMG src="图片n连接地址" width=图片宽度 height=图片高度 border=0>
</MARQUEE></DIV>

代码说明:

(1) scrollDelay为滚动两次之间的延迟时间,数值越大越有跳跃感,可根据情况自行设定。

(2)多张图片上下振动的显示窗口高度应大于N张图片的总高度。

反相移动(多图)

(一)自中间向左右反相移动

代码格式

<DIV align=center>
<MARQUEE scrollAmount=3 direction=left width=左半显示窗口宽度 height=左半显示窗口高度>
<IMG src="图片1连接地址">
<IMG src="图片2连接地址">
<IMG src="图片3连接地址">
……
<IMG src="图片N连接地址">
</MARQUEE>
<MARQUEE scrollAmount=3 direction=right width=右半显示窗口宽度 height=右半显示窗口高度>
<IMG src="图片一连接地址">
<IMG src="图片二连接地址">
<IMG src="图片三连接地址">
……
<IMG src="图片M连接地址">
</MARQUEE></DIV>

代码说明:

(1)若要使图片自两边向中间移动,只需将上述代码中的left和right的位置互换一下即可。

(2)向左右相反方向移动图片的数量通常应相等,即M=N。

(二)自中间向上下反相移动

代码格式

<DIV align=center>
<MARQUEE scrollAmount=3 direction=up width=上半显示窗口宽度 height=上半显示窗口高度>

<DIV align=center>
<IMG src="图片1连接地址">
<IMG src="图片2连接地址">
<IMG src="图片3连接地址">
……
<IMG src="图片N连接地址">
</DIV></MARQUEE></DIV>

<DIV align=center>
<MARQUEE scrollAmount=3 direction=down width=下半显示窗口宽度 height=下半显示窗口高度><DIV align=center>
<IMG src="图片一连接地址">
<IMG src="图片二连接地址">
<IMG src="图片三连接地址">
……
<IMG src="图片M连接地址">
</DIV ></MARQUEE></DIV>

代码说明:

(1)若要使图片自上下向中间移动,只需将上述代码中的up和down的位置互换一下即可。

(2)向上下相反方向移动图片的数量通常应相等,即M=N。

自动切换翻页

 代码格式 

<DIV align=center>
<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://image2.sina.com.cn/bj/zonghe/pixviewer.swf width=300 height=200 type=application/x-shockwave&13;&10;&13;&10;-flash wmode="opaque" bgcolor="#38B0DE" FlashVars="pics=图片1地址|图片2地址|图片3地址|……|图片N地址&links=文章1地址|文章2地址|文章3地址|……|文章N地址&texts=文章1标题|文章2标题|文章3标题|……|文章N标题&13;&10;&13;&10;5||||&borderwidth=300&borderheight=200&textheight=0" menu="false" quality="high">
</DIV>

 

 

 

代码说明:

(1)width=宽度(像素),height=高度(像素),textheight是文字区域高度,自己可根据实际自行设置。

(2)bgcolor="#38B0DE" 双引号中间部份是背景颜色值,可以参考颜色代码值设置。

(3)图片地址:就是你的图片或者文章所配图片的地址。

文章地址:如果图片1是你用是文章1所配的图片,那就把文章1的地址粘贴在这里。文章标题:就是这篇文章的标题。

(4)如果需要添加文章标题,则应添加相应的文章地址和文章标题,textheight值通常在20-40之间。

图片在边框中移动

1.

<DIV align=center>

<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 550px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">

<P>这是测试文字</P></DIV></DIV>

<DIV align=center> </DIV>

<DIV align=center>

<TABLE cellSpacing=20 cellPadding=0 width=500 background=http://www.s1./~rouge/free/17.jpg border=1>

<TBODY>

<TR>

<TD>

<TABLE cellSpacing=5 cellPadding=0 width="100%" background=http:///Background_tiles/floral1_small.jpg border=0>

<TBODY>

<TR>

<TD align=middle>

<TABLE height=333 width=500 background=http://www./BBS/UploadFile/2004-9/2004943127488.jpg border=1>

<TBODY>

<TR>

<TD>

<CENTER>

<MARQUEE scrollAmount=2 width="100%" direction="left">

<P align=center><IMG src="http://img.photo.163.com/D8NW4oWkw1h8ZEl7lsQsuw==/135952413754809701.jpg"><IMG src="http://img.photo.163.com/huKGIuiWzIja0FpHxCtnKQ==/156781562031799825.jpg"><IMG src="http://img.photo.163.com/2doh9gUAXHITVtehPfpRVA==/161848111612450704.jpg"><IMG src="http://img.photo.163.com/qi8pdt2B16RKaB1jAaAnag==/161848111612450737.jpg"><IMG src="http://img.photo.163.com/e5v1L_rMuMcx0sJhr3N_HQ==/201817558306498216.jpg"><IMG src="http://img.photo.163.com/EwBDqX_npDg6WQncYDS3Lg==/201817558306498179.jpg"><IMG src="http://img.photo.163.com/DXsROFaXxSyopXmUmCmKQQ==/193654783978438490.jpg"><IMG src="http://img.photo.163.com/Ou5HKKhgrYV5uofCbnPC5A==/156781562031799794.jpg"> </P></MARQUEE></CENTER></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

2.

<DIV align=center>
<TABLE borderColor=#cccccc height=350 cellSpacing=0 cellPadding=0 width=430 background=http://image27.360doc.com/DownloadImg/2011/04/1907/11038406_2.jpg border=1>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 scrollDelay=90 direction=up width=420 height=350>
<TABLE style="WIDTH: 400px; HEIGHT: 266px" borderColor=#cccccc cellSpacing=2 cellPadding=3 align=center background=http://image27.360doc.com/DownloadImg/2011/04/1907/11038406_3.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
</MARQUEE></TD></TR></TBODY></TABLE></DIV>

3.

<DIV align=center>

<TABLE cellSpacing=0 cellPadding=0 width=400 align=center>

<TBODY>

<TR align=middle>

<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">

<DIV align=center>

<MARQUEE scrollDelay=60 behavior=alternate width="100%" height=150>

<DIV align=center><IMG height=140 src="http://img.photo.163.com/THy1q5h46wRVTx-BUY5UFw==/287948901175134300.jpg" width=220 border=0></DIV></A></MARQUEE></DIV></TD></TR>

<TR>

<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">

<DIV align=center>

<MARQUEE scrollDelay=60 direction=up behavior=alternate width="100%" height=160>

<DIV align=center><IMG height=140 src="http://img.photo.163.com/Uchcr2-0s4dWHHlZ82cfAw==/299207900243557367.jpg" width=220 border=0></DIV></A></MARQUEE></DIV></TD></TR></TBODY></TABLE></DIV>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多