几行代码做出引导页效果

最新推荐文章于 2024-09-29 00:57:39 发布

小凡全栈

最新推荐文章于 2024-09-29 00:57:39 发布

阅读量316

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： javascript html css jquery

本文链接：https://blog.youkuaiyun.com/bs3412/article/details/120696507

学习笔记专栏收录该内容

7 篇文章

订阅专栏

这是一个关于如何使用HTML、CSS和JavaScript实现一个带有跳过功能的引导页的示例代码。页面加载时显示引导页，用户可以点击'跳过'按钮立即关闭，或者在5秒后自动隐藏并跳转到index.php。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>引导页演示</title>
    <script src="js/jquery.min.js"></script><!--引用jq-->
    <style>
    #ydy{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: url(img/ydy.png) 0% 0% /100% 100% no-repeat;  /*引用引导页图片*/
    }
    </style>
</head>
<body>
    <div id="ydy" style="display: none;">
        <button type="button" style="float:right;color: #6c757d;border-color: #6c757d;" id="btn1">跳过</button>
    </div>
    <script>
        window.onload =function(){
            $('#ydy').show();
            btn1.onclick=function(){
                $('#ydy').hide();
                window.location.href="index.php";  
            }
            setTimeout(function() {
                $('#ydy').hide();
                window.location.href="index.php";  
            }, 5000);
        }
    </script>
</body>
</html>