112、页面转换特效

112、页面转换特效

脚本说明:

第一步:把如下代码加入<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://7stk.com/')">看看效果吧!!</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">

Write a comment

Comments: 0