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

梦蓝星宇的博客

梦蓝星宇欢迎您

 
 
 

日志

 
 

【转载】大图向下滚动卷轴画实例代码  

2015-07-21 10:30:48|  分类: 大图音画代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


代码:
<table border="0" cellspacing="0" cellpadding="0" width="885" align="center"><tbody><tr><td><img title="" alt="" src="http://img1.ph.126.net/wPtV-BXM8sSaeVja8TvRuw==/2445454597679934253.gif" width="885" height="30"></td></tr></tbody></table>
<center><p style="TEXT-ALIGN: center; MARGIN-TOP: -28px; DISPLAY: block; MARGIN-LEFT: 0px;"></p><marquee direction="down" height="1780" behavior="slide" width="885" scrollamount="3">
<p align="center"><table align="center" height="550" cellspacing="0" cellpadding="0" width="781" background="http://img0.ph.126.net/A3_s2lBqY5686Q9WyloN5g==/6619149059654286843.gif" border="0"><tbody><tr><td><font></font></td></tr></tbody></table>
<table align="center" height="550" cellspacing="0" cellpadding="0" width="781" background="http://img2.ph.126.net/qavY8I-ZPVOxQl7INOZVUQ==/6630111190582298069.gif" border="0"><tbody><tr><td><font></font></td></tr></tbody></table>
<table align="center" height="550" cellspacing="0" cellpadding="0" width="781" background="http://img1.ph.126.net/V5z9VAQ2rmt1efuMi0oyNw==/6619334877119378077.jpg" border="0"><tbody><tr><td><font></font></td></tr></tbody></table>
<table border="0" cellspacing="0" cellpadding="0" width="885" align="center"><tbody><tr><td><img title="" alt="" src="http://img1.ph.126.net/wPtV-BXM8sSaeVja8TvRuw==/2445454597679934253.gif" width="885" height="30"></td></tr></tbody></table><br></p></marquee></center>
注:
1、绿色部分是卷轴gif地址。
2、蓝色是ps大图切片地址,这里以3个切片为例,如果切片多值,可连续添加多个代码<table align="center" height="550" cellspacing="0" cellpadding="0" width="781" background="切片地址" border="0"><tbody><tr><td><font></font></td></tr></tbody></table>
      如果是一张图片,就上述一个代码。
3、图片长宽度视作品而定,但卷轴宽度一定大于切片宽度,滚动高度一定大于各切片高度合计,合适度需要多次调整。
      另外滚动代码marquee中的宽度一定要与卷轴宽度一致,本例两者的宽度width都是885xp。下轴宽度是否与上轴一致由滚动代码marquee中的宽度决定。
4、在滚动代码前加一段代码<p style="TEXT-ALIGN: center; MARGIN-TOP: -28px; DISPLAY: block; MARGIN-LEFT: 0px;"></p>
      表示显示滚动方块图上边外补白-28像素,TOP负值表示向上移动补白,像素多少在操作中把握,不然轴和图总是有间隙,这段代码是我后来更新日志时通过多次实践加上去的。
      如果换成别的轴图片,可能下轴与图之间也有间隙,那么就在下轴代码<table border="0" cellspacing="0" cellpadding="0" width="" align="center"><tbody><tr><td><img title="" alt="" src="轴地址" width="" height=""></td></tr></tbody></table>前面也加上这段代码,补白负值像素再做调整。
通用代码:
<table border="0" cellspacing="0" cellpadding="0" width="" align="center"><tbody><tr><td><img title="" alt="" src="轴地址" width="" height=""></td></tr></tbody></table>
<center><p style="TEXT-ALIGN: center; MARGIN-TOP: -数值px; DISPLAY: block; MARGIN-LEFT: 0px;"></p><marquee direction="down" height="" behavior="slide" width="" scrollamount="3">
<p align="center"><table align="center" height="" cellspacing="0" cellpadding="0" width="" background="图片地址" border="0"><tbody><tr><td><font></font></td></tr></tbody></table>
<p style="TEXT-ALIGN: center; MARGIN-TOP: -数值px; DISPLAY: block; MARGIN-LEFT: 0px;"></p>
<table border="0" cellspacing="0" cellpadding="0" width="" align="center"><tbody><tr><td><img title="" alt="" src="轴地址" width="" height=""></td></tr></tbody></table><br></p></marquee></center>
注意:滚动代码marquee中的宽度width一定要与卷轴宽度一致。

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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