页面跳转特效
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+"。页面跳转中

}
}
</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.效果图:
跳转中:
温馨提醒:没有进行版本兼容和游览器兼容。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库