html+js模仿知乎滑动效果

December 26, 2019113 次阅读 阅读时长≈3分钟 建站教程 滑动知乎 百度已收录


<!DOCTYPE html>
<html lang="en">
<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">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title></title>
    <style>
        .big-box{
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            overflow: hidden;
            padding: 10px 0;
            height: 130px;
        }
        .box_1{
            width: 90%;
            margin: auto;
            position: absolute;
            box-shadow: -1px 2px 4px #C2C2C2;
            border-radius: 5px;
            padding: 16px 16px 10px;
            background: #fff;
        }
        .box_1>span{
            display: block;
            padding: 2px 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .box_1>span:nth-child(1){
            color: #333;
            font-size: 17px;
            font-weight: 600;
        }
        .box_1>span:nth-child(2){
            color: #333;
            font-size: 15px;
        }
        .box_1>div{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0 0;
        }
        .box_1>div>span{
            color: #9B9B9B;
            font-size: 14px;
        }
        .box_1>div>div{
            display: flex;
            align-items: center;
        }
        .box_1>div>div>div{
            margin: 0 10px;
            font-size: 14px;
            padding: 4px 14px;
            border-radius: 2px;
        }
        .box_1>div>div>div:nth-child(1){
            background: #F5F5F5;
            color: #9B9B9B;
        }
        .box_1>div>div>div:nth-child(2){
            background: #E8F4FD;
            color:#386DB0;
        }

        .submit_btn{
            margin: 20px auto;
            padding: 8px 0px;
            text-align: center;
            font-size: 14px;
            background: #1386F6;
            border-radius: 3px;
            color: #fff;                
            width: 100px;
            box-shadow: -1px 2px 4px #C2C2C2;
            position:relative;
            overflow: hidden;
            cursor: pointer;
        }
        /* .submit_btn:hover span{
            left: 100%;
            transition: all .5s;
        } */
        .go{
            left: 100% !important;
            transition: all .5s;
        }
        .submit_btn span{
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            width: 100px;
            background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0));
            left: -100%;
            transform: rotate(-50deg);
        }
    </style>
</head>
<body>
    <div class="big-box">
    </div>

    <div class="submit_btn">提交<span></span></div>

    <script>
        let dataList = [ //第一次请求的数据
            {
                title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                guanzhu:'12',
            },
            {
                title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                guanzhu:'12',
            },
            {
                title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                guanzhu:'12',
            },
            {
                title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                guanzhu:'12',
            },
            {
                title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                guanzhu:'12',
            },
            {
                title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                guanzhu:'12',
            }
        ];
        let box_1 = document.getElementsByClassName('box_1'); //获取dom

        let html = '',index = 0,z_index = dataList.length;
        for(let item of dataList){
            index++,z_index--;
            html+=`<div class="box_1 boxs_${index}" style="z-index: ${z_index}; opacity: ${index>2?0:1}; ${index == 2?'top: 22px;; transform: scale(.96);':''} ">
                <span>${item.title1}</span>
                <span>${item.title2}</span>
                <div>
                    <span>${item.guanzhu}人关注</span>
                    <div>
                        <div>忽略</div>
                        <div>回答</div>
                    </div>
                </div>
            </div>`
        }
        document.getElementsByClassName('big-box')[0].innerHTML = html;
        for(let i in dataList){
            i++
            let doc = document.getElementsByClassName('boxs_'+i)[0]
            touchevent(doc,i) //注入滑动事件
        }

        function touchevent(target,i){
            let pageX,startX,offsetLeft,lefts,endpageX;
            return target.addEventListener('touchstart',function(e){
                    console.log(target.previousSibling)
                    if(target.previousSibling){
                        if(target.previousSibling.style.opacity == 1) return;
                    }

                    target.style.cssText = 'z-index:999; opacity:1;'
                    startX = e.targetTouches[0].pageX;
                    offsetLeft = target.offsetLeft;
                }),target.addEventListener('touchmove',function(e){
                    if(target.previousSibling){
                        if(target.previousSibling.style.opacity == 1) return;
                    }

                    e.preventDefault()
                    pageX = e.targetTouches[0].pageX;
                    let left = pageX - startX + parseInt(offsetLeft)
                    lefts = left
                    target.style.cssText = 'z-index:999; left:'+left+'px; opacity:1;'
                }),target.addEventListener('touchend',function(e){
                    if(target.previousSibling){
                        if(target.previousSibling.style.opacity == 1) return;
                    }

                    if(i == dataList.length)lefts = 0;
                    endpageX = e.changedTouches[0].pageX;
                    if(endpageX === startX)return;
                    if(lefts<=-70){
                        target.style.cssText = 'left: -110%; transition:all .3s; z-index:999; opacity:0;'
                        next(target,i);
                    }else if(lefts>=70){
                        target.style.cssText = 'left: 110%; transition:all .3s; z-index:999; opacity:0;'
                        next(target,i);
                    }else{
                        target.style.cssText = 'left: '+offsetLeft+'px; transition:all .3s; z-index:999; opacity:1;'
                        setTimeout(() => {
                            target.style.cssText = 'left: '+offsetLeft+'px; z-index:999; opacity:1;';
                        }, 300);
                    }
                })
        };
        
        function next(target,i){
            if(i == dataList.length -2){ console.log('执行下一页');page() }
            i++;
            document.getElementsByClassName('boxs_'+i)[0].style.cssText = 'opacity: 1; transform: scale(1); transition:all .3s; z-index:999; top:10px;'
            i++;
            document.getElementsByClassName('boxs_'+i)[0].style.cssText = 'opacity: 1; transform: scale(.96); transition:all .3s; z-index:99; top:22px;'
        }

        function page(){
            let pageList = [ //请求下一页的数据
                {
                    title1:'我是下一页',
                    title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    guanzhu:'12',
                },
                {
                    title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    guanzhu:'12',
                },
                {
                    title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    guanzhu:'12',
                },
                {
                    title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    guanzhu:'12',
                },
                {
                    title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    guanzhu:'12',
                },
                {
                    title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',
                    guanzhu:'12',
                }
            ];
            dataList.push(...pageList)
            let html = '',z_index = dataList.length;
            for(let item of pageList){
                index++,z_index--;
                html+=`<div class="box_1 boxs_${index}" style="z-index: ${z_index}; opacity: 0; ${index == 2?'top: 22px;; transform: scale(.96);':''} ">
                    <span>${item.title1}</span>
                    <span>${item.title2}</span>
                    <div>
                        <span>${item.guanzhu}人关注</span>
                        <div>
                            <div>忽略</div>
                            <div>回答</div>
                        </div>
                    </div>
                </div>`
            }

            $(".big-box").append(html)
            let indexs = index - pageList.length
            for(let i in pageList){
                indexs++
                let doc = document.getElementsByClassName('boxs_'+indexs)[0]
                touchevent(doc,indexs)
            }
        }
    
        let btn = document.getElementsByClassName('submit_btn')[0];
        btn.onclick = function(e){
            this.children[0].classList.add('go')
            console.log(this.children)
            setTimeout(() => {
                this.children[0].classList.remove('go')
            }, 500); 
        }
    </script>
    
</body>
</html>

发表评论


嘿,我来帮您!