注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

空间是友谊的桥梁,欢迎常来做客!

温馨乐源http://liuxia1061578356.blog.163.c

 
 
 

日志

 
 

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

2014-03-27 17:47:33|  分类: ps素材 |  标签: |举报 |字号 订阅

  下载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>

  评论这张
 
阅读(15)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017