分享

“字幕特效不间断滚动图片”代码

 chwm1201 2011-02-19
 
 
在博客代码制作中,用字幕效果制作过滚动图片的朋友肯定知道,当一遍完成后,会有一个空档没有内容,空出的部分相当设置的窗口的大小。实在是美中不足。研究了很久,查看了很多资料,有朋友研究出了用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://image23.360doc.com/DownloadImg/2011/02/1913/9297254_1.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_2.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_3.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_4.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_5.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_6.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_7.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_8.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_9.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_10.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_1.gif> </TD>
<TD style="WIDTH: 540px" background=http://image23.360doc.com/DownloadImg/2011/02/1913/9297254_2.gif> </TD>
</TD></TR></TBODY></TABLE></DIV></MARQUEE></CENTER>

参考方法:

1:复制代码到记事本

2:上传图片 得到地址

3:逐一修改图片地址 图片宽度 (注意第一 第二张图片需要重复一次 放在前面 至于为什么这样,点击这里看原理http://mymc./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>

 

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约