网易博客素材、教程、代码基地

请引用的朋友，不要删除链接，谢谢合作

日志

关于我

佳人素材教程基地

和阳光的人在一起,心里就不会晦暗,和快乐的人在一起,嘴角就常带微笑,和进取的人在一起,行动就不会落后,和大方的人在一起,处事就不小气,和睿智的人在一起,遇事就不迷茫,和聪明的人在一起,做事就变机敏。——借人之智,完善自己。学最好的别人,做最好的自己。

文章分类

“字幕特效不间断滚动图片”代码【教程】

2012-01-11 13:49:32| 分类：【字体教程】 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

本文转载自雁飞墨行《“字幕特效不间断滚动图片”代码【教程】》

　　在博客代码制作中，用字幕效果制作过滚动图片的朋友肯定知道，当一遍完成后，会有一个空档没有内容，空出的部分相当设置的窗口的大小，实在是美中不足。研究了很久，查看了很多资料，有朋友研究出了用js语言编程可以解决。

现在我把这个代码通俗易懂的整理出来，通过验证，实在是用普通代码就能实现“不间断滚动图片”的效果，感兴趣的朋友请验证一下。

　　现在以十大名花古诗这十张图片为例，边欣赏边学习，第一张为“水仙”，第十张为“山茶花”。

全部代码如下：（注意粗体变色数字）
<CENTER>
<MARQUEE style="LEFT: 0px; WIDTH: 800px; POSITION: relative; TOP: 0px; HEIGHT: 370px" scrollAmount=3 scrollDelay=1 direction=right>
<DIV style="LEFT: 0px; WIDTH: 4600px; POSITION: relative; TOP: 0px; HEIGHT: 370px">
<TABLE style="LEFT: -1080px; WIDTH: 6480px; POSITION: absolute; TOP: 0px; HEIGHT: 370px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="WIDTH: 540px" background=http://img.ph.126.net/ECx-YsB2PwuXMVzLr0CLpg==/2362138004556460035.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img541.ph.126.net/6m7f1yElzEeHk00f6ZNYhQ==/1285496218638760018.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img693.ph.126.net/FYRACGYhAQmVJBNtbHK4iw==/1108729933264605903.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img534.ph.126.net/JrJwXcjDc2RAKO9ZSxHHUw==/2654871980336101154.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img775.ph.126.net/ips2tsgAQXfiQH5N_pn5XQ==/4860791372816746212.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img153.ph.126.net/EoLs5Gbd323KrRQYw4eRLA==/1649724838503071231.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img767.ph.126.net/wVUA9jyAs0cPoq4UqxetSg==/3763883388575148540.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img.ph.126.net/WWYvEw3_MSJ84kOrAvc5og==/3059632996845430498.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img541.ph.126.net/DBetO7qbtikbQChIGTxmwQ==/1288310968405855772.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img534.ph.126.net/ShpihtEGsjzi5GyWU3p1oQ==/2647272155964916440.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img.ph.126.net/ECx-YsB2PwuXMVzLr0CLpg==/2362138004556460035.gif>　</TD>
<TD style="WIDTH: 540px" background=http://img541.ph.126.net/6m7f1yElzEeHk00f6ZNYhQ==/1285496218638760018.gif>　</TD>
</TD></TR></TBODY></TABLE></DIV></MARQUEE></CENTER>

参考方法：

1：复制代码到记事本

2：上传图片得到地址

3：逐一修改图片地址图片宽度（注意第一第二张图片需要重复一次放在前面至于为什么这样，点击这里看原理http://mymc.sc.cn/zmtx.htm）

4：要让图片不间断的播放代码中下面几个数字是关键（加粗）

a：10张图片总宽度：5400 （图片多少都可以）

b：重复2张图片的宽度：540+540=1080 （看上面的代码图片1、图片2 用到两次）

c：表格总宽：5400+1080=6480

d：窗口宽度：800

e：图片容器：5400-800=4600

f：根据你图片的情况进行计算然后把代码前部分对应位置进行数字替换

g：复制全部代码到博客编辑源代码里就OK

代码不复杂，研究出此代码的老师功夫深障眼法用得好，让人看不出来破绽！

照教程执行如果你觉得有点“那个” 就只改改数字套用得了其中奥妙就在这几个数字和容器<div>

博客技巧	电脑技巧	艺术收藏	原创作品	漂亮妹妹	精品图库
音画图文	书画艺术	音画欣赏	精美边框	精美素材	在线影视
网址导航	在线制作	点击查看本站更多精彩		电子图书	立地书厨

评论这张

转发至微博

阅读(470)| 评论(1)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087067082094080064083085084075072087088068087087087066082086',
              blogTitle:'“字幕特效不间断滚动图片”代码【教程】',
              blogAbstract:'<EMBED height=\"150\" allowNetworking=\"internal\" flashvars=\"bannerWidth=900&bannerHeight=150&bannerSID=http://img.uu1001.cn/x3/2011-02-18/21-54/2011-02-18_fdb682b292daf03462201bfbc19e3097_0.xml&bannerXML=&bannerLink=http%3A%2F%2F&dataSource=&bid=17701489&appSource=default\" allowScriptAccess=\"never\" width=\"900\" quality=\"high\" invokeurls=\"false\" src=\"http://img.uu1001.cn/bcv3.swf?v=909d0b2\" type=\"application/x-shockwave-flash\" wmode=\"transparent\"  \>   <P\><STRONG\>　　在博客代码制作中，用字幕效果制作过滚动图片的朋友肯定知道，当一遍完成后，会有一个空档没有内容，空出的部分相当设置的窗口的大小，实在是美中不足。研究了很久，查看了很多资料，有朋友研究出了用js语言编程可以解决。</STRONG\></P\>  <P\><STRONG\>       现在我把这个代码通俗易懂的整理出来，通过验证，实在是用普通代码就能实现“不间断滚动图片”的效果，感兴趣的朋友请验证一下。</STRONG\></P\>  <P\><STRONG\>　　现在以十大名花古诗这十张图片为例，边欣赏边学习，第一张为“水仙”，第十张为“山茶花”。</STRONG\></P\>',
              blogTag:'',
              blogUrl:'blog/static/197311160201201114932484',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:0,
              publishTime:1326260972484,
              permalink:'blog/static/197311160201201114932484',
              commentCount:1,
              mainCommentCount:1,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'和阳光的人在一起,心里就不会晦暗,和快乐的人在一起,嘴角就常带微笑,和进取的人在一起,行动就不会落后,和大方的人在一起,处事就不小气,和睿智的人在一起,遇事就不迷茫,和聪明的人在一起,做事就变机敏。——借人之智,完善自己。学最好的别人,做最好的自己。',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/197311160201201114932484">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

网易博客素材、教程、代码基地

导航

日志

“字幕特效不间断滚动图片”代码【教程】

历史上的今天

最近读者

热度

评论

页脚