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

转载▼

效果图一

效果图二

原图一

原图二

原图三

原图四

注   释

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

特别说明：图片素材来自网络。推荐学习资料如下：代码借鉴：柳叶的博客：http://blog.chelder.com.cn/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&amp;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&amp;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&amp;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&amp;690"></MARQUEE></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>