致力于网页设计制作教程:HTTP://WWW.ASP119.COM
Photoshop教程
网络营销
Flash教程
最近更新
收藏本站
CSS视频教程
CSS中文手册
PHP视频教程
SEO视频教程
JS基础教程
jquery中文手册
首页
网络专题
操作系统
工具软件
网站运营
平面设计
媒体动画
网页制作
网页特效
网络编程
认证考试
当前位置：
首页
>
网页特效
>
浏览器
> 正文
经典网页之间切换的效果
作者：××× 来源：本站 浏览： 添加日期：2009-2-25 19:36:37
经典网页之间切换的效果
<html> <head> <title>网页特效|ccap168.cn/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('../index.htm')">看看效果吧!!</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.htm')"><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>
提示：您可以先修改部分代码再运行
上一篇文章:
计算机等级考试:C语言指针的运算
下一篇文章:
去掉浏览右侧滚动条的方法
相关文章
标准完美用完全禁止右键代码...
经典网页之间切换的效果
去掉浏览右侧滚动条的方法
网页三列自适应等高且中列宽度自适应
相关栏目
图片特效
网页文字特效
网页背景
鼠标代码
时间特效
导航代码
浏览器
综合特效
推荐文章
css+div中实现无缝图片滚动代码
让PNG图片在各种浏览器下透明的方法
根据网站的流量换不同表情的LOGO
在线SEO免费工具测试
加快windows7开机速度的方法
2010年国内SEO缺的不是方法而是方向
PHP ASP JS中循环语句使用比较分析
快速查找网站死连接和处理的方法
2010年计算机等级考试二级C++笔试试题
快速成为SEO高手
