想做一个知乎滑动效果，下面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工作流
一种长着彩虹翅膀的虫子comfyui工作流
一个神秘的隐藏面孔下一本书的剪影ComfyUI工作流
一个女人站在海边的岩石上，飞来一只鸟
猜你喜欢
纯css3绘制的小鸟
canvas空间文本射线
在线生成金属文字
原生ajax接口在线执行
RTvue 低代码开发平台
数字滚动效果(兼容IE6/IE8)
制作一个好玩的倒计时声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
