|
图片移动代码集锦
Good fun编辑
今天继续昨天的话题，没看过的新朋友可以先点击看看《图片移动代码集锦新编》，了解各个属性的含义及详细设置！Goodfun的这些代码交流都是写给新朋友看的，写的比较噜苏，高手勿扰！
由于今天要做多张图片并排移动，所以准备了3张素材如下：
先来看一段横向并排排列多图滚动的基本代码：
<CENTER>
<MARQUEE height=300 behavior=alternate width=滚动显示区域宽度 scrolldely="50" align="center">
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=所有图片的总宽度和 height=图片的高度>
<TBODY>
<TR>
<TD height=第一张图片高度 width=第一张图片宽度><img src=第一张图片地址 height=第一张图片高度 width=第一张图片宽度></TD>
<TD height=第二张图片高度 width=第二张图片宽度><img src=第二张图片地址 height=第二张图片高度 width=第二张图片宽度></TD>
<TD height=第三张图片高度 width=第三张图片宽度><img src=第三张图片地址 height=第三张图片高度 width=第三张图片宽度> </TD>
...........
<TD height=第N张图片高度 width=第N张图片宽度><img src=第N张图片地址 height=第N张图片高度 width=第N张图片宽度> </TD>
</TR></TBODY></TABLE></MARQUEE></CENTER>
本文就以三张图片横向并列来回移动为例，代码中图片地址大小一一替换编辑并设置显示区域等各参数后代码如下（本例的素材图片的高度和宽度都是400*300，所以总宽度是1200，其他滚动的属性等设置参见上一篇：图片移动代码集锦新编）：
<CENTER>
<MARQUEE height=300 behavior=alternate width=400 scrolldely="50" align="center">
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=1200 height=300>
<TBODY>
<TR>
<TD height=300 width=400><img src=http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_6.gif></TD>
<TD height=300 width=400><img src=http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_7.gif></TD>
<TD height=300 width=400><img src=http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_8.gif></TD>
<TR></TBODY></TABLE></MARQUEE></CENTER>
效果如下：
下面来看一个竖向并列图片上下来回移动的代码：
<CENTER>
<MARQUEE height=滚动显示区域高度 direction=up behavior=alternate width=滚动显示区域宽度 scrolldely="50" align="center">
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=单张图片的宽度 height=所有图片的高度总和>
<TBODY>
<TR>
<TD height=第一张图片高度 width=第一张图片宽度><img src=第一张图片地址 height=第一张图片高度 width=第一张图片宽度></TD></TR>
<TR>
<TD height=第二张图片高度 width=第二张图片宽度><img src=第二张图片地址 height=第二张图片高度 width=第二张图片宽度></TD></TR>
<TR>
<TD height=第三张图片高度 width=第三张图片宽度><img src=第三张图片地址 height=第三张图片高度 width=第三张图片宽度> </TD></TR>
...........
<TR><TD height=第N张图片高度 width=第N张图片宽度><img src=第N张图片地址 height=第N张图片高度 width=第N张图片宽度> </TD></TR>
</TBODY></TABLE></MARQUEE></CENTER>
代码设置同上例，只是这里要增加图片复制的代码是这么一段“<TR>....</TR>”，就是本代码红色的那段，加几张图片，就加几段这样的代码！
本例三张图片的代码如下：
<CENTER>
<MARQUEE direction=up height=300 behavior=alternate width=400 scrolldely="50" align="center">
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=400 height=900>
<TBODY>
<TR>
<TD height=300 width=400><IMG src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_6.gif"></TD>
</TR>
<TR>
<TD height=300 width=400><IMG src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_7.gif"></TD></TR>
<TR>
<TD height=300 width=400><IMG src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_8.gif"></TD>
<TR></TR></TBODY></TABLE></MARQUEE></CENTER>
效果如下：
下面来讲一下，并排移动加链接的代码，其实就是给每张移动的图片做个链接，竖向排列移动基本代码如下：
<CENTER>
<MARQUEE height=滚动显示区域高度 direction=up behavior=alternate width=滚动显示区域宽度 scrolldely="50" align="center">
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=单张图片的宽度 height=所有图片的高度总和>
<TBODY>
<TR>
<TD height=第一张图片高度 width=第一张图片宽度> <A href="第一张图片链接地址" target=_blank> <img src=第一张图片地址 height=第一张图片高度 width=第一张图片宽度></A></TD></TR>
<TR>
<TD height=第二张图片高度 width=第二张图片宽度> <A href="第二张图片链接地址" target=_blank> <img src=第二张图片地址 height=第二张图片高度 width=第二张图片宽度></A></TD></TR>
<TR>
<TD height=第三张图片高度 width=第三张图片宽度> <A href="第三张图片链接地址" target=_blank> <img src=第三张图片地址 height=第三张图片高度 width=第三张图片宽度></A> </TD></TR>
...........
<TR><TD height=第N张图片高度 width=第N张图片宽度> <A href="第N张图片链接地址" target=_blank> <img src=第N张图片地址 height=第N张图片高度 width=第N张图片宽度> </A></TD></TR>
</TBODY></TABLE></MARQUEE></CENTER>
关于链接的属性说明请查看上一篇！本例三张图片替换后代码如下：
<CENTER>
<MARQUEE direction=up height=300 behavior=alternate width=400 scrolldely="50" align="center">
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=400 height=900>
<TBODY>
<TR>
<TD height=300 width=400><A href="http://kaixinhaoren99.blog.163.com" target=_blank><IMG src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_6.gif"> </A> </TD></TR>
<TR>
<TD height=300 width=400><A href="http://kaixinhaoren99.blog.163.com" target=_blank><IMG src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_7.gif"></A>
</TD></TR>
<TR>
<TD height=300 width=400> <A href="http://kaixinhaoren99.blog.163.com" target=_blank><IMG src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_8.gif"></A></TD>
</TR></TBODY></TABLE></MARQUEE></CENTER>
效果如下（点击图片可去到我的博客首页）：
横向并排移动加链接基本代码：
<CENTER>
<MARQUEE height=滚动显示区域高度 direction=up behavior=alternate width=滚动显示区域宽度 scrolldely="50" align="center">
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=所有图片的宽度总和 height=图片的高度>
<TBODY>
<TR>
<TD height=第一张图片高度 width=第一张图片宽度> <A href="第一张图片链接地址" target=_blank> <img src=第一张图片地址 height=第一张图片高度 width=第一张图片宽度></A></TD>
<TD height=第二张图片高度 width=第二张图片宽度> <A href="第二张图片链接地址" target=_blank> <img src=第二张图片地址 height=第二张图片高度 width=第二张图片宽度></A></TD>
<TD height=第三张图片高度 width=第三张图片宽度> <A href="第三张图片链接地址" target=_blank> <img src=第三张图片地址 height=第三张图片高度 width=第三张图片宽度></A> </TD>
...........
<TD height=第N张图片高度 width=第N张图片宽度> <A href="第N张图片链接地址" target=_blank> <img src=第N张图片地址 height=第N张图片高度 width=第N张图片宽度> </A></TD></TR>
</TBODY></TABLE></MARQUEE></CENTER>
替换后代码如下（这里还可以在第一个"table"或者每张图片前面的“A”后面加一个鼠标放松去显示的提升信息属性“title=点击图片进入Goodfun博客”，但滚动图片显示这个提示信息不像不动的图片那么灵敏）：
<CENTER>
<MARQUEE title=点击图片进入Goodfun博客 height=300 behavior=alternate width=400 scrolldely="50" align="center">
<TABLE title=点击图片进入Goodfun博客 border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=1200 height=300>
<TBODY>
<TR>
<TD height=300 width=400><A title=点击图片进入Goodfun博客 href="http://kaixinhaoren99.blog.163.com" target=_blank><IMG src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_6.gif"> </A> </TD>
<TD height=300 width=400><A title=点击图片进入Goodfun博客 href="http://kaixinhaoren99.blog.163.com" target=_blank><IMG src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_7.gif"></A>
</TD>
<TD height=300 width=400> <A title=点击图片进入Goodfun博客 href="http://kaixinhaoren99.blog.163.com" target=_blank><IMG src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_8.gif"></A></TD>
</TR></TBODY></TABLE></MARQUEE></CENTER>
效果如下：
下面来讲一下，多张移动图片并排移动羽化后加链接左右来回移动的代码，只要给每张图片加一个羽化属性“ style="FILTER: alpha(opacity=100,style=2)" ”即可，羽化属性详细设置请查看上一篇，上面那效果添加羽化属性后代码如下（比较上面那个效果的代码，就每张图片地址那里多了个红色的羽化代码）：
<CENTER>
<MARQUEE title=点击图片进入Goodfun博客 height=300 behavior=alternate width=400 scrolldely="50" align="center">
<TABLE title=点击图片进入Goodfun博客 border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=1200 height=300>
<TBODY>
<TR>
<TD height=300 width=400><A title=点击图片进入Goodfun博客 href="http://kaixinhaoren99.blog.163.com" target=_blank><IMG style="FILTER: alpha(opacity=100,style=2)" src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_6.gif"> </A> </TD>
<TD height=300 width=400><A title=点击图片进入Goodfun博客 href="http://kaixinhaoren99.blog.163.com" target=_blank><IMG style="FILTER: alpha(opacity=100,style=2)" src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_7.gif"></A>
</TD>
<TD height=300 width=400> <A title=点击图片进入Goodfun博客 href="http://kaixinhaoren99.blog.163.com" target=_blank><IMG style="FILTER: alpha(opacity=100,style=2)" src="http://image95.360doc.com/DownloadImg/2016/03/0410/67099312_8.gif"></A></TD>
</TR></TBODY></TABLE></MARQUEE></CENTER>
效果如下：
好了，今天就先到这里，有时间再交流如何在这样的效果上面加flash，如何让这样的效果在图片上滚动，及上下跳动的滚动等等！上下来回滚动并列羽化加链接的代码这里就不说了，道理和横向并列一样，给每个图片加个羽化效果的属性即可！朋友在制作中有问题，可以在Goodfun原文的日志下留下评论和我交流！
| 
