拆解“字幕特效不间断滚动图片”_无js语言 试着做了一个 用了10张图片 高相同 都是500 宽是任意的 用代码让它从左到右不停滚动 全部代码如下:(注意粗体变色字) <div style="position: relative; left: 0; top: 0; width: 5380; height: 500"> <td style="width:706px" background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_1.jpg"> </td> <td style="width:703px"background="http://image23.360doc.com/DownloadImg/2011/02/1012/9043772_3.jpg"> </td> 参考方法: 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">
|
|