分享
 
 
 

各大网站主页常用特殊效果分析及应用方法

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

平时上班,最常做的事就是去各大门户网站看看新闻。

于是发现个大门户网站主页上的特殊效果不禁相同(如左右上角的FLASH旗标,左右下角的小FLASH浮标,背投广告等)。这种问题难不倒高手,可是对于新手来说,是非常希望学会的。现在我就来逐一分析一下门户网站主页的特殊效果。

1。首先分析左右上角FLASH旗标的制作方法。(如下图所示)

通过分析代码可以发现,页面中有这样一段话。

<SCRIPT FOR=’tomdl’ EVENT=’FSCommand()’ LANGUAGE=’JavaScript’>

dllayer2.style.visibility=’hidden’;

dllayer3.style.visibility=’hidden’;

</script>

<script src=http://ad.tom.com/zhf/lenovo/1110-hdl.js></script>

这段话是通过1110-hdl.js这个页面来调用FLASH到页面的相应位置。所以说主要的属性设置都是在1110-hdl.js这个页面里。我们按照地址把这个页面DOWN下来。由于不能上传JS文件,故我先把代码贴上来。

<SCRIPT FOR=’tomdl’ EVENT=’FSCommand()’ LANGUAGE=’JavaScript’>

dllayer2.style.visibility=’hidden’;

dllayer3.style.visibility=’hidden’;

</script>

<script src=http://ad.tom.com/zhf/lenovo/1110-hdl.js></script>

这段话是通过1110-hdl.js这个页面来调用FLASH到页面的相应位置。所以说主要的属性设置都是在1110-hdl.js这个页面里。我们按照地址把这个页面DOWN下来。由于不能上传JS文件,故我先把代码贴上来。

function winload()

{

dllayer2.style.top=20;

dllayer2.style.left=5;

dllayer3.style.top=20;

dllayer3.style.right=5;

} //这段分别是对FLASH图标在页面上的位置的设定(上边距和左右边距的数值)

if(document.body.offsetWidth>800){

{

document.write("<div id=dllayer2 style=’position: absolute;visibility:visible;z-index:1’><EMBED src=’http://ad.tom.com/zhf/lenovo/1110-hdl.swf&#39; quality=high WIDTH=100 HEIGHT=300 TYPE=’application/x-shockwave-flash’ id=tomdl></EMBED></div>"

+"<div id=dllayer3 style=’position: absolute;visibility:visible;z-index:1’><EMBED src=’http://ad.tom.com/zhf/lenovo/1110-hdl.swf&#39; quality=high WIDTH=100 HEIGHT=300 TYPE=’application/x-shockwave-flash’ id=tomdl></EMBED></div>");//这段话是载入FLASH的路径以及对FLASH的相应的一些设置。

}

winload()

}

可能一些初学者看到这里觉得有点乱,现在我就教大家如何把这几段代码用到自己的网站上去。

(1)首先新建一个页面1.htm,随意地建一个居中的表格设定宽为600,长为500。

(2)将以下代码拷入BODY中。

function winload()

{

dllayer2.style.top=20;

dllayer2.style.left=5;

dllayer3.style.top=20;

dllayer3.style.right=5;

} //这段分别是对FLASH图标在页面上的位置的设定(上边距和左右边距的数值)

if(document.body.offsetWidth>800){

{

document.write("<div id=dllayer2 style=’position: absolute;visibility:visible;z-index:1’><EMBED src=’http://ad.tom.com/zhf/lenovo/1110-hdl.swf&#39; quality=high WIDTH=100 HEIGHT=300 TYPE=’application/x-shockwave-flash’ id=tomdl></EMBED></div>"

+"<div id=dllayer3 style=’position: absolute;visibility:visible;z-index:1’><EMBED src=’http://ad.tom.com/zhf/lenovo/1110-hdl.swf&#39; quality=high WIDTH=100 HEIGHT=300 TYPE=’application/x-shockwave-flash’ id=tomdl></EMBED></div>");//这段话是载入FLASH的路径以及对FLASH的相应的一些设置。

}

winload()

}

可能一些初学者看到这里觉得有点乱,现在我就教大家如何把这几段代码用到自己的网站上去。

(1)首先新建一个页面1.htm,随意地建一个居中的表格设定宽为600,长为500。

(2)将以下代码拷入BODY中。

可能一些初学者看到这里觉得有点乱,现在我就教大家如何把这几段代码用到自己的网站上去。

(1)首先新建一个页面1.htm,随意地建一个居中的表格设定宽为600,长为500。

(2)将以下代码拷入BODY中。

<SCRIPT FOR=’tomdl’ EVENT=’FSCommand()’ LANGUAGE=’JavaScript’>

dllayer2.style.visibility=’hidden’;

dllayer3.style.visibility=’hidden’;

</script>

<script src="1110-hdl.js"></script>

(3)编辑1110-hdl.js页面。主要是改载入SWF的路径。

function winload()

{

dllayer2.style.top=20;

dllayer2.style.left=5;

dllayer3.style.top=20;

dllayer3.style.right=5;

} if(document.body.offsetWidth>800){

{

document.write("<div id=dllayer2 style=’position: absolute;visibility:visible;z-index:1’><EMBED src=’1.swf’ quality=high WIDTH=100 HEIGHT=300 TYPE=’application/x-shockwave-flash’ id=tomdl></EMBED></div>"

+"<div id=dllayer3 style=’position: absolute;visibility:visible;z-index:1’><EMBED src=’2.swf’ quality=high WIDTH=100 HEIGHT=300 TYPE=’application/x-shockwave-flash’ id=tomdl></EMBED></div>");

}

winload()

}

(4)编辑两个100*300的FLASH,导出两个SWF文件,分别取名为1.swf和2.swf。

(5)分别保存以上文件在同一目录下。运行1.htm看看效果。

本例源文件压缩包:点击这里下载源文件

2。接下来分析左右下角FLASH浮标的制作方法。(如下图所示)

同样分析代码,得到

<SCRIPT language=JavaScript>

var ad_float_left_src = "http://ad.tom.com/zhf/tom/930free.swf";

var ad_float_left_type = "swf";

</SCRIPT>

<SCRIPT src="http://ad.tom.com/tomad/floatleft.js"></SCRIPT>

同样的可以发现是通过floatleft.js这个JS页面来调用并且设置左下角的FLASH浮标。相对应的floatright.js就是用来控制右下角的浮标的。

这次就不对floatleft.js这个页面的代码再做什么分析了。

直接介绍如何把这个效果应用到自己的网页中去。

(1)首先新建一个页面2.htm,随意地建一个居中的表格设定宽为600,长为500。

(2)将以下代码拷入BODY中。

<SCRIPT language=JavaScript>

var ad_float_left_src = "1.swf";

var ad_float_left_type = "swf";

</SCRIPT>

<SCRIPT src="floatleft.js"></SCRIPT>

<SCRIPT language=JavaScript>

var ad_float_right_src = "2.swf";

var ad_float_right_type = "swf";

</SCRIPT>

<SCRIPT src="floatright.js"></SCRIPT>

(3)这次不用对floatleft.js和floatright.js这两个页面进行编辑。想研究里面代码的,可以下载本例的附件查看这两个页面。

(4)编辑两个80*80的FLASH,导出两个SWF文件,分别取名为1.swf和2.swf。

(5)分别保存以上文件在同一目录下。运行2.htm看看效果。

(浮标会随着页面的滚动而浮动,本例由于页面短所以看不出此效果。)

本例源文件压缩包:点击这里下载源文件

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有