js html桌面应用 知乎,html+js模仿知乎滑动效果

.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);

}

提交

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+=`

${item.title1}

${item.title2}

${item.guanzhu}人关注

忽略

回答

`

}

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+=`

${item.title1}

${item.title2}

${item.guanzhu}人关注

忽略

回答

`

}

$(".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);

}