几行代码做出引导页效果

最新推荐文章于 2023-04-06 16:47:55 发布

原创最新推荐文章于 2023-04-06 16:47:55 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css #jquery

学习笔记专栏收录该内容

7 篇文章

订阅专栏

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

完整代码：

<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>