制作移动卷轴画卷的代码及实例4款

祖国华诞 普天同庆 祖国华诞 普天同庆

 

效果图一

 

 

祖国昌盛 国泰民安 祖国昌盛 国泰民安

 

效果图二

 

 

人民英雄 永垂不朽 人民英雄 永垂不朽

 

效果图三

 

 

我爱我的祖国 祝您十一快乐 昭昭公主敬献

 

效果图四

 

 

 

背景素材一

 

 

背景素材二

 

 

背景素材三

 

 

背景素材四

 

 

卷轴素材一

 

 

卷轴素材二

 

 

卷轴素材三

 

 

图片素材一

 

 

图片素材二

 

 

图片素材三

 

 

图片素材四

 

注   释

总想着回访各位朋友，可是太忙啦，许多留言、评语和纸条都没有及时回复，心中充满了歉意。但看到朋友们来了，我就很高兴！就用设计的新作品报答朋友们的厚爱吧。

 

国庆节将至，我爱我的祖国，我设计本款卷轴画卷代码祝贺祖国华诞并供朋友们参考。在这个特殊的节日里与朋友们一起恭祝祖国繁荣昌盛、国泰民安！并奉上一颗祝福的心，愿幸福、如意、快乐、鲜花，一切美好与您同在。

 

我的作品最重要的不仅仅是代码功能的设计，我更追求的是对代码的创意应用。我曾设计过竖版卷轴移动画卷代码，受当时对代码控制能力的限制，无法做到全轴移动，只能让轴的中间部分移动后与固定的双侧小轴合并，这成了我的一个心病。今天我终于找到处理办法啦。就是用定位代码控制图片移动的位置，让组成卷轴的五张图片像一张图片一样移动，效果堪称完美。当然本款代码还运用了多行表格合并、文字移动定位及各种移动之间的速度控制等技巧。如果您熟悉代码，就会感受到其中的智慧，包括图片素材的选择、色彩的搭配及规格参数的设置。理解和掌握了代码功能，就能实现想要的创意效果，表达的含义立刻丰满起来，整体画面冲击力极强。我用代码实现了这一创意。哈哈，想想就很难吧？这就是我的愿望，我做到啦！谁让我喜欢代码设计呢？边框和文字的颜色可以调整，目的是满足整体的审美要求。红色代码是背景素材地址，绿色代码是图片素材地址。其它十个地址就是同一张卷轴素材地址。替换文字或图片地址后预览满意即可发表。为了充分展示移动卷轴长卷的视觉美感，我特意设计全屏大图代码效果图四，如果您喜欢，请放在博文尾部，以免影响您的博客首页画面。刷新可重看移动效果。

 

特别提示：您也可以用此代码创作自己的主题图。我曾设计过多篇节日图文图代码，得到许多朋友的喜爱，附在本文后面，欢迎点击选用。重要的节日、重要的事件都是我的设计主题，这里的代码，只要您喜欢，可以尽情选用。代码设计只是技巧，最重要的是构思创意。发挥您的智慧，创作出更美的佳作。

特别说明：图片素材来源于网络。  

 

 

 

 

点击图片看昭昭 公主的文字博客

  

 

  

效果图一代码

<DIV align=center>
<TABLE style="WIDTH: 98%" cellSpacing=20 cellPadding=0 align=center background=http://s8.sinaimg.cn/orignal/5e1a7abfgad3757cf6817&690 border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE style="WIDTH: 100%" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD width=50 rowSpan=5><IMG height=20 src="http://s16.sinaimg.cn/orignal/5e1a7abfgad3757c45e2f&690" width=50><IMG height=15 src="http://s16.sinaimg.cn/orignal/5e1a7abfgad3757c45e2f&690" width=20><IMG height=390 src="http://s16.sinaimg.cn/orignal/5e1a7abfgad3757c45e2f&690" width=50><IMG height=15 src="http://s16.sinaimg.cn/orignal/5e1a7abfgad3757c45e2f&690" width=20><IMG height=20 src="http://s16.sinaimg.cn/orignal/5e1a7abfgad3757c45e2f&690" width=50></TD>
<TD width=610>
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=590><IMG height=20 src="http://s16.sinaimg.cn/orignal/5e1a7abfgad3757c45e2f&690" width=50></MARQUEE></DIV></TD></TR>
<TR>
<TD>
<DIV style="MARGIN-TOP: 0px; MARGIN-LEFT: -15px">
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=590><IMG height=15 src="http://s16.sinaimg.cn/orignal/5e1a7abfgad3757c45e2f&690" width=20></MARQUEE></DIV></DIV></TD></TR>
<TR>
<TD>
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=540><IMG style="BORDER-TOP: #0d3529 20px solid; BORDER-BOTTOM: #0d3529 20px solid" height=350 src="http://s15.sinaimg.cn/orignal/5e1a7abfgad37584e03be&690" width=590></MARQUEE></DIV>
<DIV style="MARGIN-TOP: -390px; MARGIN-LEFT: 0px">
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=590><IMG height=390 src="http://s16.sinaimg.cn/orignal/5e1a7abfgad3757c45e2f&690" width=50></MARQUEE></DIV></DIV>
<DIV style="MARGIN-TOP: -320px; MARGIN-LEFT: 0px">
<DIV align=center>
<MARQUEE scrollAmount=1 direction=down behavior=alternate width=240 height=150>
<MARQUEE style="FONT-SIZE: 35pt" scrollAmount=1 direction=up width=240 height=120><FONT face=隶书 color=#fff600><BR><BR><BR><BR>祖国华诞<BR>普天同庆</FONT></MARQUEE></MARQUEE></DIV></DIV></TD></TR>
<TR>
<TD>
<DIV style="MARGIN-TOP: 0px; MARGIN-LEFT: -15px">
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=590><IMG height=15 src="http://s16.sinaimg.cn/orignal/5e1a7abfgad3757c45e2f&690" width=20></MARQUEE></DIV></DIV></TD></TR>
<TR>
<TD>
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=590><IMG height=20 src="http://s16.sinaimg.cn/orignal/5e1a7abfgad3757c45e2f&690" width=50></MARQUEE></DIV></TD></TR></TBODY></TABLE></DIV>
<DIV align=center>
<MARQUEE style="FONT-SIZE: 35pt" scrollAmount=1 behavior=slide loop=1 width=410 height=50><FONT face=隶书 color=#fff600>祖国华诞 普天同庆</FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE></DIV> 

  

 

  

效果图四代码

<DIV align=center>
<TABLE style="LEFT: -255px; WIDTH: 980px; POSITION: relative" cellSpacing=25 cellPadding=0 align=center background=http://s12.sinaimg.cn/orignal/5e1a7abfgad386a209c7b&690 border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE style="WIDTH: 100%" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD width=50 rowSpan=5><IMG height=20 src="http://s12.sinaimg.cn/orignal/5e1a7abfgad3757eddb3b&690" width=50><IMG height=15 src="http://s12.sinaimg.cn/orignal/5e1a7abfgad3757eddb3b&690" width=20><IMG height=460 src="http://s12.sinaimg.cn/orignal/5e1a7abfgad3757eddb3b&690" width=50><IMG height=15 src="http://s12.sinaimg.cn/orignal/5e1a7abfgad3757eddb3b&690" width=20><IMG height=20 src="http://s12.sinaimg.cn/orignal/5e1a7abfgad3757eddb3b&690" width=50></TD>
<TD width=610>
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=880><IMG height=20 src="http://s12.sinaimg.cn/orignal/5e1a7abfgad3757eddb3b&690" width=50></MARQUEE></DIV></TD></TR>
<TR>
<TD>
<DIV style="MARGIN-TOP: 0px; MARGIN-LEFT: -15px">
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=880><IMG height=15 src="http://s12.sinaimg.cn/orignal/5e1a7abfgad3757eddb3b&690" width=20></MARQUEE></DIV></DIV></TD></TR>
<TR>
<TD>
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=830><IMG style="BORDER-TOP: #999966 20px solid; BORDER-BOTTOM: #999966 20px solid" height=420 src="http://s14.sinaimg.cn/orignal/5e1a7abfgad375846a81d&690" width=860></MARQUEE></DIV>
<DIV style="MARGIN-TOP: -460px; MARGIN-LEFT: 0px">
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=880><IMG height=460 src="http://s12.sinaimg.cn/orignal/5e1a7abfgad3757eddb3b&690" width=50></MARQUEE></DIV></DIV>
<DIV style="MARGIN-TOP: -370px; MARGIN-LEFT: 0px">
<DIV align=center>
<MARQUEE scrollAmount=1 direction=down behavior=alternate width=400 height=150>
<MARQUEE style="FONT-SIZE: 40pt" scrollAmount=1 direction=up width=400 height=120><FONT face=隶书 color=#007400><BR><BR><BR><BR><BR>我爱我的祖国<BR>祝您十一快乐<BR>昭昭公主敬献</FONT></MARQUEE></MARQUEE></DIV></DIV></TD></TR>
<TR>
<TD>
<DIV style="MARGIN-TOP: 0px; MARGIN-LEFT: -15px">
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=880><IMG height=15 src="http://s12.sinaimg.cn/orignal/5e1a7abfgad3757eddb3b&690" width=20></MARQUEE></DIV></DIV></TD></TR>
<TR>
<TD>
<DIV align=left>
<MARQUEE scrollAmount=2 direction=right behavior=slide loop=1 width=880><IMG height=20 src="http://s12.sinaimg.cn/orignal/5e1a7abfgad3757eddb3b&690" width=50></MARQUEE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV>

 

 

 

 

 

我的更多文章：

• 在移动边框图左右添加竖排文字的代码【国粹《百》图集】(2011-05-11 12:14:42)
• 制作中式风格窗格边框的代码及实例6款【清明时节】(2011-04-02 12:06:52)
• 制作移动卷轴画代码【正月十五元宵夜】(2011-02-09 08:41:50)
• 制作透视移动多图的代码及实例8款【难说再见】(2010-10-26 11:35:58)
• 制作对角排列透明FLASH的代码4款【歌唱祖国】(2010-09-27 22:43:53)
• 制作立体视觉移动长卷的代码及实例4款(2010-05-18 21:44:07)
• 在大图片上定位添加小图片和FLASH【欢度国庆】(2009-09-30 08:08:15)
• 制作在背景图上循环移动图片的代码【乐队喜迎国庆节】(2009-09-26 22:48:05)
• 巧用代码给移动长卷美图添加边框的方法及3款实例(2009-07-12 21:54:33)
• 巧用代码让美图呈现长卷画面效果及实例(2009-06-27 20:29:29)