经典页面转换特效

站内搜索

热门关键字：表格超链接漂浮跟随旋转闪烁日期艺术字滚动点击关联菜单弹出随机

网页特效分类

网页特效分类 >> 页面特效

经典页面转换特效

[ 发布者：luwei | 来源：本站整理 | 时间：2005-10-23 | 浏览：人次 ]

<html>

<head>
<title>网页特效|JcwCn.Com/Js|---经典页面转换特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.curtain {
	position:absolute;
	visibility:hidden;
}
</style>
</head>

<body bgcolor="#FFFFFF" onLoad="init()"
style="width:100%;overflow-x:hidden;overflow-y:hidden">

<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>   </em></strong></font>
      <p><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></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 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>
      <p><font color="#0000FF"> 点击这里</font>，<a href="javascript:openpage('http://sc.jcwcn.com/tx/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('http://sc.jcwcn.com/tx/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>


<table border="0" width="100%">
  <tr>
    <td width="100%">　</td>
  </tr>
</table>
</body>

本类相关特效