首页 考试吧论坛 Exam8视线 考试商城 网络课程 模拟考试 考友录 实用文档 求职招聘 论文下载
2011中考 | 2011高考 | 2012考研 | 考研培训 | 在职研 | 自学考试 | 成人高考 | 法律硕士 | MBA考试
MPA考试 | 中科院
四六级 | 职称英语 | 商务英语 | 公共英语 | 托福 | 雅思 | 专四专八 | 口译笔译 | 博思 | GRE GMAT
新概念英语 | 成人英语三级 | 申硕英语 | 攻硕英语 | 职称日语 | 日语学习 | 法语 | 德语 | 韩语
计算机等级考试 | 软件水平考试 | 职称计算机 | 微软认证 | 思科认证 | Oracle认证 | Linux认证
华为认证 | Java认证
公务员 | 报关员 | 银行从业资格 | 证券从业资格 | 期货从业资格 | 司法考试 | 法律顾问 | 导游资格
报检员 | 教师资格 | 社会工作者 | 外销员 | 国际商务师 | 跟单员 | 单证员 | 物流师 | 价格鉴证师
人力资源 | 管理咨询师考试 | 秘书资格 | 心理咨询师考试 | 出版专业资格 | 广告师职业水平
驾驶员 | 网络编辑
卫生资格 | 执业医师 | 执业药师 | 执业护士
会计从业资格考试会计证) | 经济师 | 会计职称 | 注册会计师 | 审计师 | 注册税务师
注册资产评估师 | 高级会计师 | ACCA | 统计师 | 精算师 | 理财规划师 | 国际内审师
一级建造师 | 二级建造师 | 造价工程师 | 造价员 | 咨询工程师 | 监理工程师 | 安全工程师
质量工程师 | 物业管理师 | 招标师 | 结构工程师 | 建筑师 | 房地产估价师 | 土地估价师 | 岩土师
设备监理师 | 房地产经纪人 | 投资项目管理师 | 土地登记代理人 | 环境影响评价师 | 环保工程师
城市规划师 | 公路监理师 | 公路造价师 | 安全评价师 | 电气工程师 | 注册测绘师 | 注册计量师
缤纷校园 | 实用文档 | 英语学习 | 作文大全 | 求职招聘 | 论文下载 | 访谈 | 游戏
您现在的位置: 考试吧(Exam8.com) > 软件水平考试 > 复习资料 > 网页制作 > 正文

网页特效:很Cool页面转换效果

  脚本说明:

  第一步:把如下代码加入<body>区域中

  <script LANGUAGE="Javascript">
  <!--
  // 过渡的速度
  var pause=50
  var widthstep=10
  // 效果的色彩
  var curtaincolor1="FFFF00"
  // 右
  var curtaincolor2="EE8800"
  // 下
  var curtaincolor3="EE8800"
  // 左
  var curtaincolor4="FFFF00"
  var screenheight
  var screenwidth
  var heightstep
  var maxmove=0
  var timer
  var url
  var curtaincontent1=""
  var curtaincontent2=""
  var curtaincontent3=""
  var curtaincontent4=""
  function init() {
   if (document.all) {
    screenwidth=document.body.clientWidth
    screenheight=document.body.clientHeight
    curtaincontent1="<table cellpadding=0 cellspacing=0 width=‘"+screenwidth+"‘ height=‘"+screenheight+"‘><tr><td bgcolor=‘"+curtaincolor1+"‘> </td></tr></table>"
    curtaincontent2="<table cellpadding=0 cellspacing=0 width=‘"+screenwidth+"‘ height=‘"+screenheight+"‘><tr><td bgcolor=‘"+curtaincolor2+"‘> </td></tr></table>"
    curtaincontent3="<table cellpadding=0 cellspacing=0 width=‘"+screenwidth+"‘ height=‘"+screenheight+"‘><tr><td bgcolor=‘"+curtaincolor3+"‘> </td></tr></table>"
    curtaincontent4="<table cellpadding=0 cellspacing=0 width=‘"+screenwidth+"‘ height=‘"+screenheight+"‘><tr><td bgcolor=‘"+curtaincolor4+"‘> </td></tr></table>"
    curtain1.innerHTML=curtaincontent1
    curtain2.innerHTML=curtaincontent2
    curtain3.innerHTML=curtaincontent3
    curtain4.innerHTML=curtaincontent4
    heightstep=Math.round(widthstep/screenwidth*screenheight)
   }
   if (document.layers) {
    screenwidth=window.innerWidth
    screenheight=window.innerHeight
    curtaincontent1="<table cellpadding=0 cellspacing=0 width=‘"+screenwidth+"‘ height=‘"+screenheight+"‘><tr><td bgcolor=‘"+curtaincolor1+"‘>&nbsp;</td></tr></table>"
    curtaincontent2="<table cellpadding=0 cellspacing=0 width=‘"+screenwidth+"‘ height=‘"+screenheight+"‘><tr><td bgcolor=‘"+curtaincolor2+"‘>&nbsp;</td></tr></table>"
    curtaincontent3="<table cellpadding=0 cellspacing=0 width=‘"+screenwidth+"‘ height=‘"+screenheight+"‘><tr><td bgcolor=‘"+curtaincolor3+"‘>&nbsp;</td></tr></table>"
    curtaincontent4="<table cellpadding=0 cellspacing=0 width=‘"+screenwidth+"‘ height=‘"+screenheight+"‘><tr><td bgcolor=‘"+curtaincolor4+"‘>&nbsp;</td></tr></table>"
    document.curtain1.document.write(curtaincontent1)
    document.curtain1.document.close()
    document.curtain2.document.write(curtaincontent2)
    document.curtain2.document.close()
    document.curtain3.document.write(curtaincontent3)
    document.curtain3.document.close()
    document.curtain4.document.write(curtaincontent4)
    document.curtain4.document.close()
    heightstep=Math.round(widthstep/screenwidth*screenheight)
   }
  }
  function openpage(thisurl) {
   url=thisurl
   if (document.all) {
    document.all.curtain1.style.posTop=-screenheight
    document.all.curtain1.style.posLeft=0
    document.all.curtain2.style.posTop=0
    document.all.curtain2.style.posLeft=screenwidth
    document.all.curtain3.style.posTop=screenheight
    document.all.curtain3.style.posLeft=0
    document.all.curtain4.style.posTop=0
    document.all.curtain4.style.posLeft=-screenwidth
    document.all.curtain1.style.visibility="VISIBLE"
    document.all.curtain2.style.visibility="VISIBLE"
    document.all.curtain3.style.visibility="VISIBLE"
    document.all.curtain4.style.visibility="VISIBLE"
    movecurtains()
   }|||   if (document.layers) {
    document.curtain1.top=-screenheight
    document.curtain1.left=0
    document.curtain2.top=0
    document.curtain2.left=screenwidth
    document.curtain3.top=screenheight
    document.curtain3.left=0
    document.curtain4.top=0
    document.curtain4.left=-screenwidth
    document.curtain1.visibility="VISIBLE"
    document.curtain2.visibility="VISIBLE"
    document.curtain3.visibility="VISIBLE"
    document.curtain4.visibility="VISIBLE"
    movecurtains()
   }
  }
  function movecurtains() {
   if (maxmove<=screenwidth/2) {
    if (document.all) {
     document.all.curtain1.style.posTop+=heightstep
     document.all.curtain2.style.posLeft-=widthstep
     document.all.curtain3.style.posTop-=heightstep
     document.all.curtain4.style.posLeft+=widthstep
    }
    if (document.layers) {
     document.curtain1.top+=heightstep
     document.curtain2.left-=widthstep
     document.curtain3.top-=heightstep
     document.curtain4.left+=widthstep
    }
    maxmove+=widthstep
    var timer=setTimeout("movecurtains()",pause)
   }
   else {
    clearTimeout()
    document.location.href=url
   }
  }
  // - End of Javascript - -->
  </script>
  <STYLE>
  .curtain {
    position:absolute;
   visibility:hidden;
  }
  </STYLE>
  <DIV ID="deletethisblock" class="redirstyle" style="position:absolute;left:10px;top:10px;color:000000;font-family:"宋体";font-size:9pt">
  <a href="javascript:openpage(‘http://www.csai.cn/‘)">看看效果吧!!</a>
  </DIV>
  <DIV ID="curtain1" class="curtain"></DIV>
  <DIV ID="curtain2" class="curtain"></DIV>
  <DIV ID="curtain3" class="curtain"></DIV>
  <DIV ID="curtain4" class="curtain"></DIV>

  第二步:把<body>中的内容改为

  <body bgcolor="#fef4d9" onLoad="init()" style="width:100%;overflow-x:hidden;overflow-y:hidden">

1 2  下一页
文章搜索
软件水平考试栏目导航
版权声明:如果软件水平考试网所转载内容不慎侵犯了您的权益,请与我们联系800@exam8.com,我们将会及时处理。如转载本软件水平考试网内容,请注明出处。