简答几行代码实现页面分屏列展示效果 分享

shuke 2019-11-8 1726

 使用响应式布局(支持所有设备)bs4.3


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分屏展示效果 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery.slim.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <style>
        .skapp {margin:0;padding:0}
        .skapp > dd {background:#fcfcfc;overflow:auto;-ms-overflow-style:none;
            overflow:-moz-scrollbars-none;}
        .skapp>dd:nth-child(2n) {background:lightcyan}
        .skapp > dd::-webkit-scrollbar {display:none;}
        dl,dd,dt {margin:0;}
        .skdot {z-index:99;position:fixed;right:10px;top:30%;}
        .skdot_list {list-style:none}
        .skdot_list>li {border:gray solid 1px;height:10px;width:10px;
            background:white;border-radius:50%;margin:10px 0;}
        .skdot_list>li:nth-child(2n) {background:lightcyan}
        .skdot_list>li:hover {background:green;cursor:pointer;}
    </style>
</head>
<body>
<div class="skdot"><ul class="skdot_list"></ul></div>
<dl class="container-fluid skapp" id="app">
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>
    <dd>4</dd>
</dl>
</body>
</html>
<script>
    $(function () {
        $("#app>dd").css("height", window.innerHeight + "px")
            .each(function (e) {
            let item=document.createElement("li")
            $(item).bind("click", function(){
                 window.scrollTo(0,window.innerHeight*e)
            });
            $(".skdot_list").append(item)
        })
    })
</script>
最新回复 (0)
全部楼主
返回