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

蓝水

蓝水原创 文字小屋 友情花坞

 
 
 

日志

 
 

【转载】多张图片连接移动代码  

2014-11-10 21:48:43|  分类: 各种博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自静听风雨《多张图片连接移动代码》
           

多张图片连接移动代码

       把自己拍的照片或喜欢的图片连接起来,让它们循环移动,放在博客首页展示的方法之一,复制以下代码按顺序填上图片网址,更换合适的数据就可以了(效果如本日志图),代码如下:

 <CENTER><MARQUEE

style="POSITION: relative; WIDTH: 660px; HEIGHT:400px; TOP: 0px; LEFT: 0px;"  

direction=" right"  scrollAmount="3"  scrollDelay="1"  ><DIV

style="POSITION: relative; WIDTH: 2940px; HEIGHT: 400px; TOP: 0px; LEFT: 0px;" >

<TABLE  style="POSITION:absolute ; WIDTH: 4800px; HEIGHT: 400px; TOP: 0px; LEFT: -1200px;"   border="0"  cellSpacing="0"  cellPadding="0"  ><TBODY><TR> 

 <TD style="WIDTH: 600px;"   background="图片地址1"  ></TD>
  <TD style="WIDTH: 600px;"   background="图片地址2"  ></TD>
   <TD style="WIDTH: 600px;"   background="图片地址3"  ></TD>
    <TD style="WIDTH: 600px;"   background="图片地址4"  ></TD>
     <TD style="WIDTH: 600px;"   background="图片地址5"  ></TD>
      <TD style="WIDTH: 600px;"   background="图片地址6"  ></TD>
       <TD style="WIDTH: 600px;"   background="图片地址7"  ></TD> (同1)
        <TD style="WIDTH: 600px;"   background="图片地址8"  ></TD> (同2)
        </TR></TABLE></DIV></MARQUEE></CENTER>

 代码说明:

   1.WIDTH: 660px(显示窗口宽度),HEIGHT:400px(显示窗口高度)

   2. direction=" right" (图片移动的方向)

   3. scrollAmount="3"  (图片移动速度)

   4. WIDTH: 2940px; HEIGHT: 400px (显示图片总长减去窗口长度600*6-660、高度400)

   5. WIDTH: 4800px; HEIGHT: 400px (图片的总长度600*8、高度400)

      6.  style="WIDTH: 600px;" background="图片地址1"(每张图片的宽度和图片网址)

      7. 为了使图片循环移动中间没有空白,图片1和图片7;图片2和图片8,用同一张。

   8.以上说明的数字、方向、速度、图片的多少等要根据自己所用图片的情况和需要来改变。

 

 
 
 
 
 
 
 
 

 

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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