经典超酷的页面切换效果_另类网页特效

·网页特效库 ·网页工具库

背景按钮

导航特效

< 后退 | 收藏网页特效库

推荐网页特效

推荐网页工具

您的位置：网页特效库 >> 另类网页特效 >> 经典超酷的页面切换效果	查看此特效演示

经典超酷的页面切换效果

把如下代码复制到<body>与</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+"'> </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://www.butong.net')">看看效果吧!!</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>标签为

上一个特效：鼠标事件!控制滚动条滚动

返回列表

下一个特效：三个鼠标奇异事件代码