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

小乐作品--细品人生

品味生活-品味茶香-品味青春-品味我们的年代

 
 
 

日志

 
 
关于我

Hello,大家好,个性名:唐少,英文名:harry Tang《哈里.唐》,别名叫:happy king,网络达人名:唐家OPPA。我是一个活泼开朗且又风趣的大男生,超赞的个性一族哦~!最骄傲的就是自己长了一张人见人爱,佛见佛跪拜的娃娃脸,我来至于周恩来的故乡--淮安。本人博友已到上限,你们加我为好友吧!

网易考拉推荐

【转载】【图片多方位移动】  

2017-03-09 13:38:41|  分类: 【博客专辑】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自金钥匙《【图片多方位移动】》

 

 

【图片多方位移动】

 

一般滚动图的头尾中间有断隙,一个巡环后等于从头另来,断续感影响画面完整,下面介绍的代码可消除间隙,改动代码方向及排续可产生不同效果,掌握其原理后的运用在自己。

 

 

 

一款

<P align=center>
<TABLE  cellSpacing=0 cellPadding=0   height=400 width=600 align=center background=http://img843.ph.126.net/ASpg8vfw2H1iWe0Om8vruw==/1874623344894815428.jpg  border=3>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 scrollDelay=60>
<TABLE style="FILTER: Alpha(opacity=300,style=2)" height=400 width=400 background=http://img.bimg.126.net/photo/S--hHGcAcJ1R4cbwseB54w==/5699023853461011614.jpg>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></MARQUEE>
</TD></TR></TBODY></TABLE></P>

 

 

 

 

二款

<MARQUEE scrollAmount=2 scrollDelay=60 direction=down height=400>
<MARQUEE scrollAmount=2 scrollDelay=60 direction=up height=400><DIV align=center><IMG src=图片地址></DIV></MARQUEE>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

三款

<MARQUEE scrollAmount=2 scrollDelay=60 direction=up height=400>
<MARQUEE scrollAmount=2  scrollDelay=60 direction=down height=400><DIV align=center><IMG src=图片地址></DIV></MARQUEE>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

 

四款

<MARQUEE scrollAmount=2 scrollDelay=60 direction=right width=640 height=350>
<MARQUEE scrollAmount=2 scrollDelay=60 direction=left width=640 height=350>
<DIV align=center><IMG src=图片地址></DIV></MARQUEE>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

五款

<TABLE height=420  width=600 background=图片地址 cellSpacing=0 cellPadding=0  border=3>
<TBODY>
<TR>
<TD>
<DIV>
<MARQUEE scrollAmount=2  scrollDelay=60 direction=down width=600 height=420>
<MARQUEE scrollAmount=2  scrollDelay=60 direction=up width=600 height=420><IMG style="FILTER: alpha WIDTH: 600px; HEIGHT: 420px" height=420 src=图片地址 width=600></MARQUEE></MARQUEE></DIV>
</TD></TR></TBODY></TABLE>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

六款

<MARQUEE scrollAmount=2  scrollDelay=60   direction=left width=650 height=350>
<MARQUEE scrollAmount=2 scrollDelay=60  direction=right width=650 height=350>
<DIV align=center><IMG src=图片地址></DIV></MARQUEE>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

七款

<MARQUEE scrollAmount=2 scrollDelay=60  direction=up behavior=alternate height=350>
<MARQUEE scrollAmount=2  scrollDelay=60  direction=up height=350>
<DIV align=center><IMG src=图片地址></DIV></MARQUEE>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

八款

<MARQUEE scrollAmount=2  scrollDelay=60  behavior=alternate width="100%">
<MARQUEE scrollAmount=2  scrollDelay=60   width="98%">
<DIV align=center><IMG src=图片地址></DIV></MARQUEE>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

九款

<MARQUEE scrollAmount=2  scrollDelay=60   direction=down><DIV align=center><IMG src=图片地址><br><br><IMG src=图片地址><br><br><IMG src=图片地址><br><br></DIV></MARQUEE>

<MARQUEE style=" FILTER: flipv(enabled=1)" scrollAmount=2  scrollDelay=60  direction=down>
<DIV align=center><IMG src=图片地址><br><br><IMG src=图片地址><br><br><IMG src=图片地址><br><br></DIV></MARQUEE>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

十款

<MARQUEE scrollAmount=2  scrollDelay=60   direction=up><DIV align=center><IMG src=图片地址><br><br><IMG src=图片地址><br><br><IMG src=图片地址><br><br></DIV></MARQUEE>

<MARQUEE style=" FILTER: flipv(enabled=1)" scrollAmount=2  scrollDelay=60  direction=up>
<DIV align=center><IMG src=图片地址><br><br><IMG src=图片地址><br><br><IMG src=图片地址><br><br></DIV></MARQUEE>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

十一款

<CENTER>
<TABLE  height=200 width=640 background=图片地址  cellSpacing=0 cellPadding=0  border=3>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 scrollDelay=60 ><IMG    height=400 src=移动图片地址  width=640></MARQUEE></TD></TR></TBODY></TABLE></CENTER>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

十二款

<CENTER>
<TABLE  height=200 width=640 background=图片地址  cellSpacing=0 cellPadding=0  border=3>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 scrollDelay=60 ><IMG  style="FILTER: Alpha(Opacity=70)"   height=500 src=移动图片地址  width=640></MARQUEE></TD></TR></TBODY></TABLE></CENTER>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

 

十三款

<CENTER>
<TABLE  height=400 cellSpacing=0 cellPadding=0 width=650 align=center  border=3>
<TBODY>
<TR>
<TD>

<TABLE  height=400 cellSpacing=0 cellPadding=0 width=650 align=center background=http://img845.ph.126.net/ZumVxK_sbNsQs-flSIBDAw==/3001930626620558791.jpg border=0>
<TBODY>
<TR>

<TD align=center>
<MARQUEE scrollAmount=2 scrollDelay=60><IMG height=400 src=http://img845.ph.126.net/ZumVxK_sbNsQs-flSIBDAw==/3001930626620558791.jpg width=640 border=0></MARQUEE></TD>

<TD align=center>
<MARQUEE scrollAmount=2  scrollDelay=60  direction=right><IMG style="FILTER: fliph" height=400 src=http://img845.ph.126.net/ZumVxK_sbNsQs-flSIBDAw==/3001930626620558791.jpg width=640 border=0></MARQUEE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></CENTER>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客 【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

 

 

 

十四款

<CENTER>
<TABLE  height=400 cellSpacing=0 cellPadding=0 width=650 align=center  border=3>
<TBODY>
<TR>
<TD>

<TABLE   height=400 cellSpacing=0 cellPadding=0 width=650 align=center background=http://img845.ph.126.net/ZumVxK_sbNsQs-flSIBDAw==/3001930626620558791.jpg border=0>
<TBODY>
<TR>

<TD align=center>
<MARQUEE scrollAmount=2 scrollDelay=60><IMG  style="FILTER: Alpha(Opacity=70)"   height=400 src=http://img845.ph.126.net/ZumVxK_sbNsQs-flSIBDAw==/3001930626620558791.jpg width=640 border=0></MARQUEE></TD>

<TD align=center>
<MARQUEE scrollAmount=2  scrollDelay=60  direction=right><IMG style="FILTER: Alpha(Opacity=70)"   height=400 src=http://img845.ph.126.net/ZumVxK_sbNsQs-flSIBDAw==/3001930626620558791.jpg width=640 border=0></MARQUEE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></CENTER>

【图片多方位移动】 - 金钥匙 - 金钥匙∷博客 【图片多方位移动】 - 金钥匙 - 金钥匙∷博客

 

direction属性:决定文本的滚动方向,分为向左left和向右right,up和down默认状态向左。

scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。
 
width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)

 

 

 

 

 

 

 

金钥匙欢迎朋友们光临!

金钥匙博客特此声明:
如果你喜欢此日志,请点击日志右下方的(推送或引用),或者左下方的(分享)。
让大家分享或引用,也算是对我的支持,谢谢!
※尊重他人劳动,崇尚网络公德。
本博作品欢迎收藏!支持转载!抵制抄袭!严禁剽窃!
引用日志及代码请保留原创字样!
※请朋友尊重朋友的劳动所成果,此筐架请你不要删,希望互相尊重!
如果你想得到别人的尊重,
那么你首先要学会怎样去尊重别人, 别人同样也会尊重你!

金钥匙再次声明:
不欢迎“复制者”--请文明上网。
您可以在网络找教程,素材,请别复制制作好的博文内容!
请别复制博文,复制专辑,修改专辑链接地址!
您复制--粘贴--也许需要几分钟,
可您知道编辑一篇教程需要多长时间吗?
可您知道编辑一篇图片“文章’需要多长时间吗?
您又知道制作“代码效果”一篇教程需要多长时间吗?
还是一句话:尊重他人劳动,崇尚网络公德。
严禁抄袭他人作品、严禁剽窃他人成果!
光看不留意见的,我将不视为博友!请文明上网!
金钥匙谢谢您的光临,并请留下宝贵意见!
感谢朋友 钥匙小语 博客禁忌 金钥匙的博客 博客现象 自我介绍 建博语感
开博心感 钥匙咀嚼 博友概念 钥匙玉言 关于版权 设计事项
关于钥匙 钥匙建议 金钥匙为你服务--问题专区 公告宣言 告知心语
坦荡的心 加友看法 人品有多美,空间就有多美 我的搏客 网聊必须
空间邀请 遇上网友 缘聚屏前 感谢朋友 逛博有感 博客随感
博友之歌 不宜交往 查看关于本博的更多信息 博客空间 致我网友

  评论这张
 
阅读(3)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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