经典页面转换特效

稿源：互联网 2022-08-02 22:01:16 点击： 173 撤稿纠错

经典页面转换特效，点击一下链接，看看漂亮的效果吧。

以下讨论的是和特效页面转换相关的经典页面转换特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>

<head>
<title>阿里西西网页特效演示，经典页面转换特效</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>

</td>
    <td align="left" valign="top" width="85%" height="78"><font face="幼圆" size="4" color="#FFFF00"><strong><em>   </em></strong></font>
      <font face="幼圆" size="4" color="#FFFF00"><strong><em> </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>

</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 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>
      <font color="#0000FF"> 点击这里</font>，<a href="javascript:openpage('../index.asp')">看看效果吧!!</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></td>
  </tr>
</table>

<table border="0" width="100%">
  <tr>
    <td width="100%">　</td>
  </tr>
</table>
</body>
<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于经典页面转换特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2008071496070.shtml方便下次再访问哦。

·上一篇： 页面上会弹跳的球
·下一篇： 会闪亮的表格

经典页面转换特效

文章分类LIST >>返回首页

最新游戏

最新新闻