分享

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

 紫百合6688 2011-02-10

拆解“字幕特效不间断滚动图片”_无js语言
http://mymc./zmtx.htm

试着做了一个 用了10张图片 高相同 都是500   宽是任意的 用代码让它从左到右不停滚动

                       

全部代码如下:(注意粗体变色字)
<center>
<marquee direction="right" scrollamount="2"  style="position: relative; left: 0; top: 0; width: 650; height: 500">

<div style="position: relative; left: 0; top: 0; width: 5380; height: 500">
 <table border="0" style="position: absolute; left: -1241; top: 0; width:7271; height: 500" cellspacing="0" cellpadding="0">
  <tr>

 <td style="width:706px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_1.jpg"> </td>
 <td style="width:535px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_2.jpg"> </td>          

 <td style="width:703px"background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_3.jpg"> </td>
 <td style="width:703px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_4.jpg"> </td>
 <td style="width:671px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_5.jpg"> </td>
 <td style="width:375px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_6.jpg"> </td>
 <td style="width:359px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_7.jpg"> </td>
 <td style="width:721px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_8.jpg"> </td>
 <td style="width:544px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_9.jpg"> </td>
 <td style="width:713px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_10.jpg"> </td>
 <td style="width:706px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_1.jpg"> </td>
 <td style="width:535px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_2.jpg"> </td>
  </tr>
 </table>
</div></marquee>
</center>

参考方法:

1:复制代码到记事本

2:上传图片 得到地址

3:逐一修改图片地址 图片宽度 (注意第二 第一张图片需要重复一次 放在前面 至于为什么这样 看教程)

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

 a:10张图片总宽度 :6030  (图片多少都可以)

b:重复2张图片的宽度:706+535=1241  (看上面的代码 2.jpg  1.jpg 用到两次)

c:表格总宽:6030+1241=7271

d:窗口宽度:650

e:图片容器:6030-650=5830

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

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

代码不复杂 老师功夫深 障眼法用得好 让人看不出来破绽! 

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

因为图片已经装在容器(DIV)里了 如果在圈里发超过560的展示 不必再添加代码 直接修改这段代码里left的数值就行了 我图片窗口是650  这里用left  -80      坐标定位 “-”是往左!

<marquee direction="right" scrollamount="2"  style="position: relative; left: -80; top: 0; width: 650; height: 500">

 

 

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

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多