回首页 ◎ 设为首页  
◎ 收藏本站  
◎ 联系我们  
  首 页  网络资讯  教程资料  免费资源  建站指南  休闲娱乐  经典整站  访客留言  
  当前位置:首 页 >> 教程资料 >> 网页制作 >> 各大网站主页常用特殊效果分析及应用方法
最 新 推 荐
淘宝网店“设计装修”..推荐
网页制作常见105个问..推荐
使用FrontPage2000注..推荐
网页制作常用代码推荐
颜色代码大全推荐
热 门 排 行
北京奥运会倒计时代码
如何在网页中插入Flas..
网页自动点击广告代码
星空动态星空背景特效..
如何用Frontpage下载..
网页两侧浮动广告代码
离开时自动提示设为首页
颜色代码大全推荐
怎么使网页跳转地址栏..
站长常用广告代码的表..
淘宝网店“设计装修”..推荐
在网页上设计飘动广告
网页制作常用代码推荐
网页常用特效整理:高..
网页制作常见105个问..推荐
使用css设置iframe样式
最 近 更 新
CSS在表格边框上的美..
Flash文件中多个swf调..
圆角边框的代码
股票即时行情查询系统
万能音.视频在线转换..
仿3721窗口拖动的代码
美化的GOOGLE广告代码
修改discuz5.5,让广..
一些所谓的CSS的“顶..
中英文双语导航菜单
广 告 位 置
站 内 搜 索
关键词

搜索方式

搜索范围

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

来源:盛绿设计 等级:默认等级
发布于2006-09-26 08:31 被读43次 【字体:
平时上班,最常做的事就是去各大门户网站看看新闻。
于是发现个大门户网站主页上的特殊效果不禁相同(如左右上角的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看看效果。
        (浮标会随着页面的滚动而浮动,本例由于页面短所以看不出此效果。)
按此在新窗口浏览图片


相关专题:暂无相关专题

上一篇:轮换的logo显示,以节约你的页面空间
下一篇:网页两侧浮动广告代码

共有评论 0 条 网友评分 0分 查看全部

【发表评论】 评分:1分 2分 3分 4分 5分


Powered By Www.Xydw.COM Ver1.14 管理
Copyright © 2004-2005 盛绿设计 All Right Reserved. XCMS
冀ICP备06026128号