页面跳转特效

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>
复制代码

我们还得为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);
        }
复制代码

好了,页面跳转特效设计完成了。

点击跳转按钮后,它会调整到百度首页。

 

2.效果图:

 

跳转中:

温馨提醒:没有进行版本兼容和游览器兼容。

源代码下载

posted @   liyou  阅读(4194)  评论(8编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示