想做一个知乎滑动效果，下面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工作流
3d卡通风格多彩头发的女人
一位宇航员做在一只乌龟上在星空中游走
一个破旧的工厂，一个骷髅雕像
一座巨大的野兽派建筑漂浮在热带风景中的贫民
沙漠里美丽的图阿雷格女孩ComfyUI工作流
瀑布边坐着一位披着斗篷的隐士
一个迷人的女人ComfyUI工作流
坐落在白雪覆盖的广阔平原上2只可爱的雪豹
猜你喜欢
RTvue 低代码开发平台
利用html5+css3实现滚雪球效果（附代码）
js+css3做一个灯泡开灯关灯效果
css3+js菜单点击动态效果
用svg画出游泳池动画效果
3d文字360度旋转
利用CSS3代码编写45款按钮效果
一个包含老黄历、佛历、道历、星宿等数据的日历网站声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
