在博客代码制作中,用字幕效果制作过滚动图片的朋友肯定知道,当一遍完成后,会有一个空档没有内容,空出的部分相当设置的窗口的大小。实在是美中不足。研究了很久,查看了很多资料,有朋友研究出了用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>