巧用边框代码制作窗外移动观景及2款实例

巧用边框代码制作窗外移动观景及2款实例

 

转载▼

效果图一

 

效果图二

 

原图一

原图二

原图三

原图四

 

注   释

用软件制作动画是件容易的事，用代码实现动画就有些难度，本博客主要以介绍代码应用为主题，这款代码的视觉如同站在窗边观赏外界景观。图片素材先进行左右翻转处理，方法参见博文《巧用代码给移动长卷美图添加边框的方法及3款实例》中的补充说明。

特别说明：图片素材来自网络。推荐学习资料如下：代码借鉴：柳叶的博客：http://blog./user1/zql680508/index.html。2010-03-12日编辑。

   

图片边框生成器&图片特效

代码在线编辑器

HTLM基础教程

起步学代码

 

 

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

 

 

 

效果图一代码

<DIV align=center>
<TABLE cellSpacing=20 width=650 align=center bgColor=#993300>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 borderColorDark=#00cc00 cellPadding=0 width="100%" bgColor=#cc3333 borderColorLight=#00cc00 border=1>
<TBODY>
<TR>
<TD width=300>
<DIV style="BORDER-RIGHT: #008888 1px solid; BORDER-TOP: #008888 1px solid; LEFT: 0px; OVERFLOW: hidden; BORDER-LEFT: #008888 1px solid; WIDTH: 300px; BORDER-BOTTOM: #008888 1px solid; POSITION: relative; TOP: 0px; HEIGHT: 390px">
<MARQUEE style="LEFT: -240px; POSITION: absolute; TOP: 0px" scrollAmount=1 scrollDelay=1 behavior=alternate width=880><IMG src="http://s15.sinaimg.cn/middle/5e1a7abfg6ed0538e6eee&690"></MARQUEE></DIV></TD>
<TD>
<DIV style="BORDER-RIGHT: #008888 1px solid; BORDER-TOP: #008888 1px solid; LEFT: 0px; OVERFLOW: hidden; BORDER-LEFT: #008888 1px solid; WIDTH: 300px; BORDER-BOTTOM: #008888 1px solid; POSITION: relative; TOP: 0px; HEIGHT: 390px">
<MARQUEE style="LEFT: -350px; POSITION: absolute; TOP: 0px" scrollAmount=1 scrollDelay=1 behavior=alternate width=880><IMG src="http://s8.sinaimg.cn/middle/5e1a7abfg6ed0538e87c7&690"></MARQUEE></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

 效果图二代码

 <TABLE cellSpacing=20 width=650 bgColor=#595959>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 borderColorDark=#00cc00 cellPadding=0 width="100%" bgColor=#006400 borderColorLight=#00cc00 border=1>
<TBODY>
<TR>
<TD width=300>
<DIV style="BORDER-RIGHT: #008888 1px solid; BORDER-TOP: #008888 1px solid; LEFT: 0px; OVERFLOW: hidden; BORDER-LEFT: #008888 1px solid; WIDTH: 300px; BORDER-BOTTOM: #008888 1px solid; POSITION: relative; TOP: 0px; HEIGHT: 301px">
<P align=center>
<MARQUEE style="LEFT: -240px; POSITION: absolute; TOP: 0px" scrollAmount=1 scrollDelay=1 behavior=alternate width=880><IMG src="http://s6.sinaimg.cn/middle/5e1a7abfg6ec9a51b59f5&690"></MARQUEE></P></DIV></TD>
<TD>
<DIV style="BORDER-RIGHT: #008888 1px solid; BORDER-TOP: #008888 1px solid; LEFT: 0px; OVERFLOW: hidden; BORDER-LEFT: #008888 1px solid; WIDTH: 300px; BORDER-BOTTOM: #008888 1px solid; POSITION: relative; TOP: 0px; HEIGHT: 301px">
<MARQUEE style="LEFT: -350px; POSITION: absolute; TOP: 0px" scrollAmount=1 scrollDelay=1 behavior=alternate width=880><IMG src="http://s11.sinaimg.cn/middle/5e1a7abfg6ec9a51b6f3a&690"></MARQUEE></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>