html+js模仿知乎滑动效果

<!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>
文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/136
0 评论
2.2k

发表评论

!