经典页面转换/切换特效页面特效__脚本特效_后台技术交错的几何形体从两侧对拉开飞飞Asp技术乐园

经典页面转换/切换特效

时间： 2008-06-04 23:25:35　阅读次数：3209

经典页面转换/切换特效
交错的几何形体从两侧对拉开

<html>

<head>
<title>网页特效|www.ffasp.com 飞飞Asp乐园|---经典页面转换特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.curtain {
	position:absolute;
	visibility:hidden;
}
</style>
</head>

<table bgcolor="#000000" cellspacing="1" width="500" align="center">
<tbody>
  <tr>
    <td bgcolor="#4775c3" align="center"><strong><em><font color="#FFFFFF" face="隶书"
    size="5">页面转换特效</font></em></strong></td>
  </tr>
</tbody>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="500" align="center" height="122">
  <tr>
    <td align="left" valign="top" width="15%" height="78"><font
    face="幼圆" size="4" color="#FFFF00"><strong><em>简介</em></strong></font>
      <p>　</p>
    </td>
    <td align="left" valign="top" width="85%" height="78"><font face="幼圆" size="4" color="#FFFF00"><strong><em>&nbsp;&nbsp;&nbsp;</em></strong></font>
      <p><font face="幼圆" size="4" color="#FFFF00"><strong><em>&nbsp;</em></strong></font><em><strong><font face="幼圆" size="4" color="#FFFF00"> 
      </font></strong></em><font face="幼圆" size="4" color="#FF0000"><em><strong>这是一个经典的页面转换效果，交错的几何形体从两侧对拉开，效果非常流畅，给人非常爽快的感觉，让人领略到爪哇脚本程序\CSS样式表单的魅力！！</strong></em></font></p>
    </td>
  </tr>
  <tr>
    <td align="left" width="15%" valign="top" height="44"><font
    color="#FFFFFF">示</font></td>
    <td align="center" valign="middle" width="85%" height="44"><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 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>
      <p><font color="#0000FF">&nbsp;点击这里</font>，<a href="javascript:openpage('../index.asp')">看看效果吧!!</a> 
      </p>
    <div ID="deletethisblock" class="redirstyle"
    style="position:absolute;left:10px;top:10px;color:000000;font-family:"
    宋体";font-size:9pt"><a href="javascript:openpage('../index.asp')"><p></a>　</p>
    </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></td>
  </tr>
</table>

提示：您可以先修改部分代码再运行