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

粉红荷花的温馨家园

相识是缘,以诚为友!

 
 
 

日志

 
 

【趣玩代码】使图片实现单向不间断滚动  

2012-04-30 11:29:16|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
2012年04月26日 - 静中有动 - 人间天堂2012年04月26日 - 静中有动 - 人间天堂2012年04月26日 - 静中有动 - 人间天堂2012年04月26日 - 静中有动 - 人间天堂

这是常规的多图向右移动形式,从中可看出起步和结束之间会产生一段空档。

           

这是经特殊处理过的多图向右移动形式,从中可看出图片是头尾相接连续移动的。

 

代码如下

<CENTER>
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD>
<MARQUEE style="POSITION: relative; WIDTH: 显示窗宽度px; HEIGHT: 图片高度px" scrollAmount=4 scrollDelay=2>
<DIV style="POSITION: relative; WIDTH: 容器宽度px; HEIGHT: 图片高度px">
<TABLE style="POSITION: absolute; WIDTH: 图片总宽度px; HEIGHT: 图片高度px; TOP: 0px; LEFT: -2张图片的总宽度px" border=0 cellSpacing=0 borderColor=#ff0000 cellPadding=0>
<TBODY>
<TR>
<TD style="WIDTH: 1图片宽度px" background=1图片地址> </TD>
<TD style="WIDTH: 2图片宽度px" background=2图片地址> </TD>
<TD style="WIDTH: 3图片宽度px" background=3图片地址> </TD>
<TD style="WIDTH: 4图片宽度px" background=4图片地址> </TD>
<TD style="WIDTH: 1图片宽度px" background=1图片地址> </TD>
<TD style="WIDTH: 2图片宽度px" background=2图片地址> </TD></TR></TBODY></TABLE></DIV></MARQUEE></TD></TR></TBODY></TABLE></CENTER>

说明:1.本例是四张图片连续滚动的示范方案,图片数量可按需要添加;

           2.在代码图片下面需重复加1图、2图二张图片;

           3.容器宽度:四张图片的总宽度减去显示窗宽度

 


  评论这张
 
阅读(163)| 评论(10)
推荐 转载

历史上的今天

评论

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

页脚

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