看了浏阳河人为老知青所作的修改,让宽幅图片动起来确实好看多了,浏阳河人所拍的集体照以这种方式在网上展示显示出他的高超拍摄技术,引人入胜。
我过去不大玩HTML代码,其实这些动感就是代码编写的简单的程序,我们的网页应用程序中基本框架都是由这些代码组成的。
今天稍空,认真研究了一下浏阳河人的这段代码,感觉有许多可取的地方,也有许多需要改进的地方,于是随意谈谈自己的观点,请浏阳河人雅正。
看到网上的代码,有些朋友总是喜欢“出格”,明明白白一个论坛规定了发贴的格式,结果代码将内容“冲”了出来,这样的方式有人喜欢,但大多数并不喜欢看,因此我也没有经过你的同意,将你的“出格”代码修改了一下,框定在文本框内,这样是不是显得规范些?
这段代码的核心部分,就是将图片在网页上相对移动,造成一种动感,为不违背网站限制一张图片不能超出200K的规定,代码中划出一个表格,并将这这个表格分为五个单元格(列),将整张图片分成五个部分,分别放在五个单元格中作为背景,再加上移动效果,于是整个的画面就移动了起来。整体来看,代码的构思是比较巧妙的。
然而代码中沉淀了过多的无用命令,让一般人望而生畏,细分析,其中的代码是有许多可以精简的。不知浏阳河人意下如何?
以下是我经过整理并用红色标记出替换数据的代码(不含音乐),供喜欢玩宽幅动感画的朋友参考:
<MARQUEE style="POSITION: relative; WIDTH:750px; HEIGHT: 570px;" onmouseover=this.stop() onmouseout=this.start() behavior=alternate scrollAmount=1
scrollDelay=1> <TABLE border=0 cellPadding=0 width=2190 height=570> <TBODY>
<TD background=http://2011.hnzqw.com/attachments/month_1110/1110031136001ccfd5675cdd52.jpg width=438></TD> <TD background=http://2011.hnzqw.com/attachments/month_1110/1110031137e78ebbb865fc9b38.jpg width=438></TD> <TD background=http://2011.hnzqw.com/attachments/month_1110/11100311371f8c766615cea152.jpg width=438></TD> <TD background=http://2011.hnzqw.com/attachments/month_1110/11100311377d1254e25efd365b.jpg width=438></TD> <TD background=http://2011.hnzqw.com/attachments/month_1110/1110031137d019e67bc5a94954.jpg width=438></TD> </TBODY></TABLE></MARQUEE>
代码中红色的字体是需要用户替换的,其中:
WIDTH:750px 表示窗口的宽度,这个宽度是网页发布文字的宽度,并没有“冲”出来。
HEIGHT: 570px 表示窗口的高度,这个高度由画面的高度来决定,根据显示器的大小,这个高度一般不超过600为好。
<TABLE border=0 cellPadding=0 width=2190 height=570> 表示五幅或者多幅拼接的画面的宽度之和为2190 其高为570,注意切割后图片大小应该与此数据相符。
background=http://2011.hnzqw.com/attachments/month_1110/1110031136001ccfd5675cdd52.jpg width=438></TD> 表示第一张背景图片的地址与宽度,第二至五张完全相同。
|