javascript实现上下滑窗

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下滑动</title>
    <style>
       @font-face {
    
    
  font-family: "iconfont"; /* Project id 2641640 */
  src: url('//at.alicdn.com/t/font_2641640_zxhd9mu3i2.woff2?t=1625010929876') format('woff2'),
       url('//at.alicdn.com/t/font_2641640_zxhd9mu3i2.woff?t=1625010929876') format('woff'),
       url('//at.alicdn.com/t/font_2641640_zxhd9mu3i2.ttf?t=1625010929876') format('truetype');
}

.iconfont {
    
    
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrowdown:before {
    
    
  content: "\e613";
}

.icon-up:before {
    
    
  content: "\e600";
}
        *{
    
    
            margin:0px;
            padding:0px;
        }
        :root, body, #container{
    
    
            width:100%;
            height:100%;
        }
        #container{
    
    
            position:absolute;
            top:0px;
        }
        #container .item{
    
    
            position:relative;
            width:100%;
            height:100%;
            text-align:center;
            color:#fff;
            font-size:60px;
            line-height:200px;
        }
        #container .item span{
    
    
            position:absolute;
            font-size:40px;
            cursor:pointer;
            width:35px;
            height:35px;
            display:inline-block !important;
            line-height:35px;
        }
        #container .item span.top{
    
    
            /* top:-80px; */
            top:0px;
            left:50%;
            transform:translateX(-50%)
        }
        #container .item span.bottom{
    
    
            /* bottom:-80px; */
            bottom:0px;
            left:50%;
            transform:translateX(-50%)
        }
        #container .item1{
    
    
            background-color:rosybrown;
        }
        #container .item2{
    
    
            background-color:salmon;
        }
        #container .item3{
    
    
            background-color:sandybrown;
        }
        #container .item4{
    
    
            background-color:sienna;
        }
    </style>
</head>
<body>
    <div id="container">
            <div class="item item1"><span class="iconfont icon-up top"></span>1<span class="iconfont icon-arrowdown bottom"></span></div>
            <div class="item item2"><span class="iconfont icon-up top"></span>2<span class="iconfont icon-arrowdown bottom"></span></div>
            <div class="item item3"><span class="iconfont icon-up top"></span>3<span class="iconfont icon-arrowdown bottom"></span></div>
            <div class="item item4"><span class="iconfont icon-up top"></span>4<span class="iconfont icon-arrowdown bottom"></span></div>
            <div class="item item1"><span class="iconfont icon-up top"></span>1<span class="iconfont icon-arrowdown bottom"></span></div>
    </div>
    <script>
        const config = {
    
    
            // 视口高度
            viewHeight:window.innerHeight,
            // 最外层dom
            container:document.getElementById("container"),
            // items
            items:document.getElementsByClassName("item"),
            // span.top
            spanTop:document.getElementsByClassName("top"),
            // span.bottom
            spanBottom:document.getElementsByClassName("bottom"),
            // animation top 
            timerTop:null,
        }
        config.containerTop = parseInt(getComputedStyle(config.container).top)
        function spanTopClick(){
    
    
            for(let i = 0; i < config.spanTop.length; i++){
    
    
                config.spanTop[i].onclick = function(){
    
    
                    // 最外层dom的top减少一个视口高度 3748px
                    if(parseInt(getComputedStyle(config.container).top) <= -3748){
    
    
                        config.container.style.top = "0px"
                    }
                    animation(parseInt(getComputedStyle(config.container).top) - config.viewHeight, "top")
                }
            }
        }
        function spanBottomClick(){
    
    
            for(let i = 0; i < config.spanBottom.length; i++){
    
    
                config.spanBottom[i].onclick = function(){
    
    
                    // 最外层dom的top减少一个视口高度 3748px
                    if(parseInt(getComputedStyle(config.container).top) >= 0){
    
    
                        config.container.style.top = "-3748px"
                    }
                    
                    animation(parseInt(getComputedStyle(config.container).top) + config.viewHeight, "bottom")
                }
            }
        }
        function animation(lastTop, direction){
    
    
            let speed = 1
            clearInterval(config.timerTop)
            config.timerTop = setInterval(function(){
    
    
                if(direction === "top"){
    
    
                    if(parseInt(getComputedStyle(config.container).top) <= lastTop){
    
    
                        clearInterval(config.timerTop)
                        config.container.style.top = lastTop + "px"
                    }else{
    
    
                        config.container.style.top = parseInt(getComputedStyle(config.container).top) - speed + "px"   
                    }
                    speed += 5
                }else if(direction === "bottom"){
    
    
                    if(parseInt(getComputedStyle(config.container).top) >= lastTop){
    
    
                        clearInterval(config.timerTop)
                        config.container.style.top = lastTop + "px"
                    }else{
    
    
                        config.container.style.top = parseInt(getComputedStyle(config.container).top) + speed + "px"   
                    }
                }
                speed += 5
            }, 30)
        }
        function init(){
    
    
            spanTopClick()
            spanBottomClick()
        }
        init()
    </script>
</body>
</html>
javascript实现上下滑窗

猜你喜欢
