想做一个知乎滑动效果，下面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工作流
猜你喜欢
Bootstrap可视化拖放布局
3d文字360度旋转
jquery做一个漂亮挂墙动态时钟
利用CSS3代码编写45款按钮效果
黑客入侵效果代码
制作一个好玩的倒计时
canvas黑洞漩涡（canvas+js）
会议人员60s签到倒计时插件声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
