想做一个知乎滑动效果，下面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>
上面是“实现知乎滑动效果介绍(附html+js代码)”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。
当前网址：https://ipkd.cn/webs_2095.html
workflows工作流
树上站着一只鸟ComfyUI工作流
哈利波特魔法ComfyUI工作流
树上挂着一只快乐香蕉ComfyUI工作流一
一只可爱的快乐老鼠戴着帽子ComfyUI工作流
一位穿着优雅银色装饰黑色连衣裙的苗条模特
一只迷人的黑豹ComfyUI工作流
一朵由琥珀制成的孤独美丽的玫瑰
一个迷人而丰满的女巫和一只黑猫骑着飞天扫帚
猜你喜欢
纯css制作卡通头像(随鼠标转头)
利用CSS3做一个星级评分样式
如何利用css3+js做一个下雨效果
Bootstrap可视化拖放布局
用canvas实现画板涂鸦效果
原生ajax接口在线执行
css3实现星球旋转
利用canvas画几个好玩的星云物种声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
