采纳追加赏 2022-08-28 12:15 采纳率: 25.5%
浏览 73
已结题

jq点击下滑开屏效果

现在做这个是一个开屏效果
网站刚进来是html.to-begin
我下拉屏幕或者点击下开屏这个.top的时候.to-begin在3秒回变成to-content

<!doctype html>
<html lang="en" class="to-trol to-begin">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>开屏效果</title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<style>
html,body{margin:auto}
.top{height: 100vh;background:#ddd;}  
.home{height:1000px;background: rgb(16, 146, 189);}  
/*html.to-begin{overflow: hidden;}
html.to-content{overflow:initial;}*/
div{position: relative;display: flex;justify-content: center;align-items: center;}
p{color:#333;font-size:40px}
</style>    

<div class="top">
    <p>开屏</p>
</div>
<div class="home">
    <p>内容</p>
</div>


</body>
</html>
  • 写回答

3条回答

  • 鱼找水需要时间 优质创作者: Java技术领域 2022-08-28 15:43
    关注
    获得5.00元问题酬金 
    <!doctype html>
<html lang="en" class="to-trol to-begin">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>开屏效果</title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>

<body>
    <style>
        html,
        body {
            margin: auto
        }

        .top {
            height: 100vh;
            background: #ddd;
        }

        .home {
            height: 1000px;
            background: rgb(16, 146, 189);
        }

        /*html.to-begin{overflow: hidden;}
html.to-content{overflow:initial;}*/
        div {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        p {
            color: #333;
            font-size: 40px
        }
    </style>

    <div class="top">
        <p>开屏</p>
    </div>
    <div class="home">
        <p>内容</p>
    </div>
</body>

</html>
<script>

    $(".top").click(() => {
        var num = 3;
        var timer = setInterval(function () {
            num--;
            if (num == 0) {
                $(".top").hide();
                clearInterval(timer);
            }
        }, 1000)

    });
</script>
    评论

报告相同问题？

问题事件

  • 系统已结题 9月5日
  • 创建了问题 8月28日