网页特效-[自理] 改善播放器的视觉效果[动网先锋论坛]

以文本方式查看主题

-  动网先锋论坛  (http://2007.hnzqw.com/index.asp)
--  网页特效  (http://2007.hnzqw.com/list.asp?boardid=59)
----  [自理] 改善播放器的视觉效果  (http://2007.hnzqw.com/dispbbs.asp?boardid=59&id=40424)

--  作者：雪踪
--  发布时间：2007/9/15 8:51:52

--  [自理] 改善播放器的视觉效果

以下内容含脚本,或可能导致页面不正常的代码
<DIV><TABLE style="LEFT: -222px; POSITION: relative; TOP: 1px" cellSpacing=40 cellPadding=0 width=990 bgColor=#ffffff border=0><TR><TD align=middle><TABLE width=910 border=0><TR><TD align=middle width=910 colSpan=3 height=83><TABLE id=table2 cellSpacing=0 width=842 border=0><TR><TD><P align=center><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 40px; LINE-HEIGHT: 120%" face=楷体_GB2312>改善播放器的视觉效果</FONT></TD></TR></TABLE><P align=center>　<TABLE id=table1 width=856 border=0><TR><TD><P align=left><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>　　我们制作帖子，常安排播放器。考虑到视觉效果需要协调，常将播放器设置成隐藏。这样又会感觉有些不方便，就是对播放情况不能控制。这里谈谈采用调整播放器颜色的方法，让视觉效果不协调的情况得到一些改善，某种程度上做到两全其美。　　方法不算复杂，也就是在原来设置播放器的基础上，加一个一行一列的表格，再在表格上加上产生透明效果的代码，让播放器半透明，部分的透出底色或底图的内容，使得它不显得那么抢眼。下面简单地讲一下代码的情况。</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial><embed width="400" height="46" src="http://202.121.48.88/osxy/images/Champs-Elysees.mp3" loop="-1"></FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>　　上面是最简单的播放器的代码，下面是表格的代码。</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial><table width="400" height="46" bgcolor=#ff0000><tr><td>（这里放播放器的代码）</td></tr></table></FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>　　下面是起透明作用的代码。</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>style="FILTER: Alpha(Opacity=39,Style=0"</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>　　将这三部分代码放在一起，就是下面的样子。</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial><table width="400" height="46" bgcolor=#ff0000><tr><td style="FILTER: Alpha(Opacity=39,Style=0"><embed width="400" height="46" src="http://202.121.48.88/osxy/images/Champs-Elysees.mp3" loop="-1"></td></tr></table></FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>　　此例的实际效果如下面的“红珊瑚”曲。代码的含意等请参考栏目中的其他帖子，这里只着重注明透明部分的代码的内容。</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial><td style="FILTER: Alpha(Opacity=39,Style=0"></FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：全句代码；</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>td</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：　　表格的单元格；</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>style</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：　样式；</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>FILTER</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：过滤，滤镜；</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>Opacity</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：不透明；这一项的值从0～100，0为全透明，100为不透明。</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>Style</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：　样式、类型。这一项可设0、1、2、3 四个不同的值，可以有四种不同的效果。</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial><table width="400" height="46" bgcolor=#ff0000></FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：全句代码；</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>table</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：表格；</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>width</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：宽度；</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>height</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：高度；</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>bgcolor</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：背景颜色；</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>#ff0000</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>：代表背景颜色的数值；需要强调一点，在输入代码的时候，千万注意“标点”以及“空格”，错一点点就不灵了。另外说明一点，这里作为举例，在表格中设置了背景色，在实际应用中，</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 16px" face=Arial>bgcolor=#ff0000 </FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 20px; LINE-HEIGHT: 120%" face=楷体_GB2312>这一项可以不要，因为帖子中一般都设有背景图。总结一下，整个事情的情况有点象这个“公式”：表格+颜色背景+透明滤镜+播放器。</FONT></TD></TR></TABLE></TD></TR><TR><TD align=middle width=910 colSpan=3 height=96><FONT style="FONT-SIZE: 30px" face=楷体_GB2312>实</FONT><FONT style="FONT-WEIGHT: 700; FONT-SIZE: 30px; LINE-HEIGHT: 120%" face=楷体_GB2312>效数例</FONT></TD></TR><TR><TD align=middle width=440><P align=center>心中的玫瑰<DIV align=center><TABLE height=46 cellSpacing=0 cellPadding=0 width=400 bgColor=#ccff99><TR><TD style="FILTER: Alpha(Opacity=39,Style=0" width=400 height=46><EMBED align=center src=http://muwen.com/OT/muwenltgs/牧文网/08/808.MP3 width=400 height=46 type=audio/mpeg volume="0" autostart="true" loop="-1"> </TD></TR></TABLE></DIV></TD><TD width=30>　</TD><TD align=middle width=440><P align=center>在银色的月光下<DIV align=center><TABLE height=46 cellSpacing=0 cellPadding=0 width=400 bgColor=#0099cc><TR><TD style="FILTER: Alpha(Opacity=39,Style=0" width=400 height=46><EMBED align=center src=http://muwen.com/OT/muwenltgs/牧文网/01/101.MP3 width=400 height=46 type=audio/mpeg volume="0" autostart="false" loop="-1"></EMBED></TD></TR></TABLE></DIV></TD></TR><TR><TD align=middle width=440 height=117><P align=center>花香鼓舞<DIV align=center><TABLE height=46 cellSpacing=0 cellPadding=0 width=400 bgColor=#ffff00><TR><TD style="FILTER: Alpha(Opacity=39,Style=0" width=400 height=46><EMBED align=center src=http://muwen.com/OT/muwenltgs/牧文网/14/1406.MP3 width=400 height=46 type=audio/mpeg volume="0" autostart="false" loop="-1"> </EMBED></TD></TR></TABLE></DIV></TD><TD width=30 height=117>　</TD><TD align=middle width=440 height=117><P align=center>爸爸的草鞋<DIV align=center><TABLE height=46 cellSpacing=0 cellPadding=0 width=400 bgColor=#cc99cc><TR><TD style="FILTER: Alpha(Opacity=39,Style=0" width=400 height=46><EMBED align=center src=http://muwen.com/OT/muwenltgs/牧文网/11/1102.MP3 width=400 height=46 type=audio/mpeg volume="0" autostart="false" loop="-1"> </EMBED></TD></TR></TABLE></DIV></TD></TR><TR><TD align=middle width=440><P align=center>珊瑚颂<DIV align=center><TABLE height=46 cellSpacing=0 cellPadding=0 width=400 bgColor=#ff0000><TR><TD style="FILTER: Alpha(Opacity=39,Style=0" width=400 height=46><EMBED align=center src=http://muwen.com/OT/muwenltgs/牧文网/12/1213.MP3 width=400 height=46 type=audio/mpeg volume="0" autostart="false" loop="-1"></EMBED> </TD></TR></TABLE></DIV></TD><TD width=30>　</TD><TD align=middle width=440><P align=center>今天是你的生日<DIV align=center><TABLE height=46 cellSpacing=0 cellPadding=0 width=400 bgColor=#ff6666><TR><TD style="FILTER: Alpha(Opacity=39,Style=0" width=400 height=46><EMBED align=center src=http://muwen.com/OT/muwenltgs/牧文网/04/408.MP3 width=400 height=46 type=audio/mpeg volume="0" autostart="false" loop="-1"></EMBED> </TD></TR></TABLE></DIV></TD></TR><TR><TD align=middle width=440>　</TD><TD width=30>　</TD><TD align=middle width=440>　</TD></TR></TABLE></TD></TR></TABLE></DIV>
说明：上面显示的是代码内容。您可以先检查过代码没问题，或修改之后再运行.

--  作者：雪踪
--  发布时间：2007/9/15 9:12:45

--  [改帖] 改善播放器外观_实用一例

以下内容含脚本,或可能导致页面不正常的代码
<FONT style="FONT-SIZE: 24px" face=仿宋_GB2312><STRONG>　　此帖为改帖，原帖由利拉乖乖编辑，发表于音画长廊。谨此说明。</STRONG></FONT><TABLE style="LEFT: -225px; POSITION: relative; TOP: 1px" cellSpacing=12 borderColorDark=#000000 cellPadding=0 width=980 bgColor=#442222 borderColorLight=#886666 background=http://www.hnzqw.com/UploadFile/2007-9/2007916111682108.jpg border=2><TR><TD background=http://www.hnzqw.com/UploadFile/2007-9/2007916111682108.jpg bgColor=#553333><TABLE cellSpacing=8 borderColorDark=#886666 cellPadding=0 width=944 bgColor=#442222 borderColorLight=#000000 background=http://www.hnzqw.com/UploadFile/2007-9/2007916111682108.jpg border=2><TR><TD bgColor=#503030><TABLE cellSpacing=10 borderColorDark=#886666 cellPadding=30 width=944 bgColor=#442222 borderColorLight=#000000 background=http://www.hnzqw.com/UploadFile/2007-9/2007916111682108.jpg border=2><TR><TD background=http://www.hnzqw.com/UploadFile/2007-9/20079159142061068.jpg bgColor=#503030><CENTER><P align=center><DIV style="FONT-SIZE: 40pt; FILTER: blur(add=1, color=#ffffff,direction=-45, strength=7); WIDTH: 700px; COLOR: #00ff00; LINE-HEIGHT: 120%; FONT-FAMILY: 黑体; HEIGHT: 43px"><B>—— 风光美景·烟雨 ——</B></DIV><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/34iV_2.jpg"><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/H9gx_1.jpg"><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/pjYD_3.jpg"><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/tzAM_4.jpg"><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/AZY9_5.jpg"><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/Z32x_6.jpg"><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/bzVt_7.jpg"><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/OlWD_8.jpg"><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/k39y_9.jpg"><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/nOXD_10.jpg"><INPUT type=image height=550 width=800 src="http://bbs.avtime.cn/attachments/forum/ZHKu_12.jpg"><TABLE><TR><TD style="FILTER: Alpha(opacity=50,finishOpacity=40,style=3)"><EMBED src=http://202.121.48.88/osxy/images/Champs-Elysees.mp3 width=300 height=42 type=audio/mpeg autostart="false" volume="0" loop="-1"> </EMBED></TD></TR></TABLE><P align=center>　<DIV style="FONT-SIZE: 22pt; FILTER: blur(add=1,color:#225500, direction=-45, strength=4); WIDTH: 372px; COLOR: #ccff66; LINE-HEIGHT: 100%; FONT-FAMILY: 楷体_GB2312; HEIGHT: 28px" align=center><B>利拉乖乖编辑 </B><FONT face=Arial>07.09.13</FONT></DIV></CENTER></TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE>
说明：上面显示的是代码内容。您可以先检查过代码没问题，或修改之后再运行.

--  作者：白云悠悠
--  发布时间：2007/9/15 20:41:47

--
这么漂亮的帖子应该是主帖，谢谢雪踪朋友的改帖，也谢谢利拉乖乖

--  作者：风铃草
--  发布时间：2007/9/19 20:00:41

--
好帖!学习了!美图 !欣赏了!

--  作者：凌云
--  发布时间：2007/9/20 9:56:30

--
没想到发播放器的帖子还有这么多的学问，谢谢了。