网页加载-上下幕布分开

Posted suni1024

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页加载-上下幕布分开相关的知识,希望对你有一定的参考价值。

参考网站 网址
效果图

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    html,body,div,ul,li,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,form,input,textarea,th,td,select{margin:0;padding:0}
    *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    html,body{min-height:100%}
    body{font-family:Helvetica,Pingfang SC,Microsoft YaHei,STHeiti,Verdana,Arial,Tahoma,sans-serif;font-size:14px;color:#333;background:#fff;position:relative}
    h1,h2,h3,h4,h5,h6{font-weight:normal}
    ul,ol{list-style:none}
    img{border:none;vertical-align:middle}
    a{color:#666;text-decoration:none}
    a:visited{color:#666;text-decoration:none}
    a:hover{color:#666;text-decoration:none}
    a:active{color:#666;text-decoration:none}
    table{border-collapse:collapse;table-layout:fixed}
    input,textarea{outline:none;border:none}
    textarea{resize:none;overflow:auto}
    .clearfix{zoom:1}
    .clearfix:after{content:".";width:0;height:0;visibility:hidden;display:block;clear:both;overflow:hidden}
    /* 本案例CSS */
body .pageUp{background: #e4e4e4;position: fixed;height: 50%;width: 100%;top: -50%;z-index: 9999999;transform: translateY(100%);transition: all 1.2s ease-in-out 0.2s;border-bottom: 1px solid #ccc;}
body .pageDown{background: #e4e4e4;position: fixed;height: 50%;width: 100%;bottom: -50%;z-index: 9999999;transform: translateY(-100%);transition: all 1.2s ease-in-out 0.2s;border-top: 1px solid #ccc;}
body.active .pageUp{transform: translateY(0);}
body.active .pageDown{transform: translateY(0);}
    </style>
</head>
<body>
    <!-- 遮罩框 S-->
    <div class="pageUp"></div>
    <div class="pageDown"></div>
    <!-- 遮罩框 E-->
    <div>导航条</div>
    <div>网站内容</div>
    <div>底部</div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
    $(function () {
        setTimeout(function () {
            $(‘body‘).addClass(‘active‘)
        }, 0)
    })
    </script>
</body>
</html>

以上是关于网页加载-上下幕布分开的主要内容,如果未能解决你的问题,请参考以下文章

收藏|分享前端开发常用代码片段

关于js----------------分享前端开发常用代码片段

js 常用代码片段

在一个片段中检测Recyclerview的上下滑动,我怎么做?

Android Webview 应用程序上下文

是否为网页上下载的每个文件加载 cookie?