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

吨袋包装机吨袋包装机董工

吨袋包装机,吨袋包装机董工,www.qzdbzc.net,邦尧吨袋包装机董工,

 
 
 

日志

 
 
关于我

吨袋包装机定制,吨袋包装机董工,邦尧吨袋包装机董工,吨袋包装机报价,吨袋包装机生产厂家,吨袋包装机视频。无锡邦尧吨袋包装机董工,

网易考拉推荐

引用 【转载】图片移动代码集锦新编【二】   

2012-07-10 21:07:54|  分类: 图像处理 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

图片移动代码集锦新编【二】

Good fun编辑

       今天继续昨天的话题,没看过的新朋友可以先点击看看《图片移动代码集锦新编》,了解各个属性的含义及详细设置!Goodfun的这些代码交流都是写给新朋友看的,写的比较噜苏,高手勿扰!

 由于今天要做多张图片并排移动,所以准备了3张素材如下:

如何让图片动起来 - Good fun - Good fun博客

 

图片移动代码集锦新编【二】 - Good fun - Good fun博客

 

图片移动代码集锦新编【二】 - Good fun - Good fun博客

 先来看一段横向并排排列多图滚动的基本代码:

<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>

 

 

图片移动代码集锦新编【二】 - Good fun - Good fun博客

 

         本文就以三张图片横向并列来回移动为例,代码中图片地址大小一一替换编辑并设置显示区域等各参数后代码如下(本例的素材图片的高度和宽度都是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://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif></TD>
<TD height=300  width=400><img src=http://img.ph.126.net/v4RfChOFJrwdlwO1t1WU5w==/923237923611685400.gif></TD>
<TD height=300  width=400><img src=http://img846.ph.126.net/AHK5fP1SirjgqVQKgACkRg==/745064263355008747.gif></TD>
<TR></TBODY></TABLE></MARQUEE></CENTER>

 

 效果如下:

 

图片移动代码集锦新编【二】 - Good fun - Good fun博客 图片移动代码集锦新编【二】 - Good fun - Good fun博客 图片移动代码集锦新编【二】 - Good fun - Good fun博客

 下面来看一个竖向并列图片上下来回移动的代码:

 <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://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif"></TD>
</TR>
<TR>
<TD height=300 width=400><IMG src="
http://img.ph.126.net/v4RfChOFJrwdlwO1t1WU5w==/923237923611685400.gif"></TD></TR>
<TR>
<TD height=300 width=400><IMG src="
http://img846.ph.126.net/AHK5fP1SirjgqVQKgACkRg==/745064263355008747.gif"></TD>
<TR></TR></TBODY></TABLE></MARQUEE></CENTER>

 

效果如下:

 

图片移动代码集锦新编【二】 - Good fun - Good fun博客
图片移动代码集锦新编【二】 - Good fun - Good fun博客
图片移动代码集锦新编【二】 - Good fun - Good fun博客

 

      下面来讲一下,并排移动加链接的代码,其实就是给每张移动的图片做个链接,竖向排列移动基本代码如下:

<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://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif"> </A> </TD></TR>
<TR>
<TD height=300 width=400><A href="
http://kaixinhaoren99.blog.163.com"   target=_blank><IMG src="http://img.ph.126.net/v4RfChOFJrwdlwO1t1WU5w==/923237923611685400.gif"></A>
</TD></TR>
<TR>
<TD height=300 width=400> <A href="
http://kaixinhaoren99.blog.163.com"   target=_blank><IMG src="http://img846.ph.126.net/AHK5fP1SirjgqVQKgACkRg==/745064263355008747.gif"></A></TD>
</TR></TBODY></TABLE></MARQUEE></CENTER>

 

效果如下(点击图片可去到我的博客首页):

 

图片移动代码集锦新编【二】 - Good fun - Good fun博客
图片移动代码集锦新编【二】 - Good fun - Good fun博客
图片移动代码集锦新编【二】 - Good fun - Good fun博客

 

 横向并排移动加链接基本代码:

<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://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif"> </A> </TD>
<TD height=300 width=400><A     title=点击图片进入Goodfun博客  href="
http://kaixinhaoren99.blog.163.com"   target=_blank><IMG src="http://img.ph.126.net/v4RfChOFJrwdlwO1t1WU5w==/923237923611685400.gif"></A>
</TD>
<TD height=300 width=400> <A   title=点击图片进入Goodfun博客   href="
http://kaixinhaoren99.blog.163.com"   target=_blank><IMG src="http://img846.ph.126.net/AHK5fP1SirjgqVQKgACkRg==/745064263355008747.gif"></A></TD>
</TR></TBODY></TABLE></MARQUEE></CENTER>

 

效果如下: 

 

图片移动代码集锦新编【二】 - Good fun - Good fun博客 图片移动代码集锦新编【二】 - Good fun - Good fun博客 图片移动代码集锦新编【二】 - Good fun - Good fun博客

        下面来讲一下,多张移动图片并排移动羽化后加链接左右来回移动的代码,只要给每张图片加一个羽化属性“  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://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.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://img.ph.126.net/v4RfChOFJrwdlwO1t1WU5w==/923237923611685400.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://img846.ph.126.net/AHK5fP1SirjgqVQKgACkRg==/745064263355008747.gif"></A></TD>
</TR></TBODY></TABLE></MARQUEE></CENTER>

 

效果如下:

 

图片移动代码集锦新编【二】 - Good fun - Good fun博客 图片移动代码集锦新编【二】 - Good fun - Good fun博客 图片移动代码集锦新编【二】 - Good fun - Good fun博客

 

          好了,今天就先到这里,有时间再交流如何在这样的效果上面加flash,如何让这样的效果在图片上滚动,及上下跳动的滚动等等!上下来回滚动并列羽化加链接的代码这里就不说了,道理和横向并列一样,给每个图片加个羽化效果的属性即可!朋友在制作中有问题,可以在Goodfun原文的日志下留下评论和我交流!

 

  评论这张
 
阅读(19)| 评论(0)
推荐

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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