2024年07月26日 建站教程
想做一个知乎滑动效果，下面web建站小编附上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>
本文链接：http://so.lmcjl.com/news/9205/