学习首页 百科 人生课堂 办公软件 英语学习 操作系统 故事会 编程资料 软件学习 设计
铭瑶网 >> 学习首页 >> 编程 >> 页面转换特效
标题：页面转换特效

【字体： 大中小】 时间:2008-4-11 来源:互联网 作者:study

页面转换特效

脚本说明:第一步：把如下代码加入<body>区域中<SCRIPT LANGUAGE="JavaScript"><!-- // 过渡的速度var pause=50var widthstep=10// 效果的色彩var curtaincolor1="FFFF00"// 右var curtaincolor2="EE8800"// 下var curtaincolor3="EE8800"// 左var curtaincolor4="FFFF00"var screenheightvar screenwidthvar heightstepvar maxmove=0var timervar urlvar 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+"'> </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>"        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://61.156.37.24/condx/')">看看效果吧!!</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"> 

查看/参与:讨论/评论 相关文章：Javascript