页面跳转特效
1.新建一个aspx网页。
这个网页的前台主要代码为：
<script type="text/javascript">
var nam;
function start(name) {
var div = document.getElementById("div");
div.outerHTML = "<div id=\"div\" style=\"font-size:small; color:Blue;width:100%; text-align:center\"><br/><br/><br/><br/><br/><br/><br/><img src=\"http://www.hainanr.cn/uppic/ss/200911112103364077807.gif\" /><br /><div id=\"timer\">页面跳转中</div></div>";
nam = name;
var div2 = document.getElementById("div");
div2.style.height = 900;
window.setInterval(abc, 1000);
}
var ii = 5;
function abc() {
ii--;
if (ii <= 0)
window.location = "http://www.baidu.com/";
else {
try{document.body.scrollTop = 0;} catch(err){}
try { document.documentElement.scrollTop = 0; } catch (err) { }
document.getElementById("timer").innerText = "你好，"+nam+"。页面跳转中
" + ii;
}
}
</script>
</head>
<body style=" margin-top:0px">
<form id="form1" runat="server">
<div id="div" style="display:none;"></div>
<div style="background-color: #FFFFE0;">
<center>
<asp:Button ID="Button1" runat="server" Text="跳转试试" onclick="Button1_Click" />
</center>
</div>
<iframe scrolling="no" frameborder="0" width="100%" height="1000px" src="http://www.csdn.net/"></iframe>
</form>
</body>
var nam;
function start(name) {
var div = document.getElementById("div");
div.outerHTML = "<div id=\"div\" style=\"font-size:small; color:Blue;width:100%; text-align:center\"><br/><br/><br/><br/><br/><br/><br/><img src=\"http://www.hainanr.cn/uppic/ss/200911112103364077807.gif\" /><br /><div id=\"timer\">页面跳转中</div></div>";
nam = name;
var div2 = document.getElementById("div");
div2.style.height = 900;
window.setInterval(abc, 1000);
}
var ii = 5;
function abc() {
ii--;
if (ii <= 0)
window.location = "http://www.baidu.com/";
else {
try{document.body.scrollTop = 0;} catch(err){}
try { document.documentElement.scrollTop = 0; } catch (err) { }
document.getElementById("timer").innerText = "你好，"+nam+"。页面跳转中
" + ii;}
}
</script>
</head>
<body style=" margin-top:0px">
<form id="form1" runat="server">
<div id="div" style="display:none;"></div>
<div style="background-color: #FFFFE0;">
<center>
<asp:Button ID="Button1" runat="server" Text="跳转试试" onclick="Button1_Click" />
</center>
</div>
<iframe scrolling="no" frameborder="0" width="100%" height="1000px" src="http://www.csdn.net/"></iframe>
</form>
</body>
我们还得为asp:button1写一个跳转事件：
protected void Button1_Click(object sender, EventArgs e)
{
ClientScriptManager cs = Page.ClientScript;
String csname1 = "PopupScript";
string name="沃恩";//some messages;
String cstext1 = "start('"+name+"');";
cs.RegisterStartupScript(this.GetType(), csname1, cstext1, true);
}
{
ClientScriptManager cs = Page.ClientScript;
String csname1 = "PopupScript";
string name="沃恩";//some messages;
String cstext1 = "start('"+name+"');";
cs.RegisterStartupScript(this.GetType(), csname1, cstext1, true);
}
好了，页面跳转特效设计完成了。
点击跳转按钮后，它会调整到百度首页。
2.效果图：
跳转中：
温馨提醒：没有进行版本兼容和游览器兼容。
