关注列表缩放滚动效果
使用jQuery和css3制作响应式的关注列表上下垂直滚动效果，可动态添加数据，带关注按钮事件。修改data数组添加或删除数据即可实现。
<head>
<meta charset="utf-8">
<title>垂直滚动关注效果</title>
<meta name="description" content="Neat">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
<style>
html, body{
min-height: 100%;
line-height:24px;
}
*{
margin:0;
padding:0;
font-size: 12px;
}
ul{
list-style:none;
}
.hide{
display: none;
}
.lf{
float: left;
}
.lr{
float: right;
}
.red, .red a,.red a h5, .red a p{
color:#FF0000 !important;
}
a {
text-decoration: none;
color: inherit;
}
.mr2 {
margin-right: 1rem;
}
.ml2 {
margin-left: 1rem;
}
.main-group{
box-sizing: border-box;
width:100%;
min-height:100vh;
padding:0 5em;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
background: linear-gradient(to bottom, #bea2e7 0%,#86b7e7 100% );
}
.main-group .items-group{
background: #fff;
max-width: 460px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 100px 20px 20px 100px;
padding: 6px 20px 6px 6px;
box-sizing: border-box;
animation: animate 15s linear infinite;
animation-delay: calc(3s * var(--delay));
position: absolute;
opacity: 0;
}
.main-group .items-group:last-child{
animation-delay: calc(-3s * var(--delay));
}
.main-group .items-group.no-animation{
animation-play-state: paused;
}
@keyframes animate {
0%{
opacity: 0;
transform: translateY(100%) scale(0.5);
}
5%, 20%{
opacity: 0.4;
transform: translateY(100%) scale(0.7);
}
25%, 40%{
opacity: 1;
z-index: 1;
pointer-events: auto;
transform: translateY(0%) scale(1);
}
45%, 60%{
opacity: 0.4;
transform: translateY(-100%) scale(0.7);
}
65%,100%{
opacity: 0;
transform: translateY(-100%) scale(0.5);
}
}
.main-group .items-group .items-box{
display: flex;
align-items: center;
/* justify-content: center; */
}
.main-group .items-group .img{
width: 90px;
height: 90px;
}
.items-group .img img{
width:100%;
height:100%;
border-radius: 50%;
box-shadow: 0 0 10px #888888;
}
.main-group .items-group .desc{
margin-left:20px;
font-size: 12px;
}
.main-group .items-group .desc .name{
font-size: 16px;
font-weight: bold;
}
.main-group .items-group .follow-btn{
border-radius: 16px;
font-weight: bold;
padding:5px 26px;
color: #fff;
background: linear-gradient(to bottom, #bea2e7 0%,#86b7e7 100% );
}
.main-group .items-group .del-follow{
background: linear-gradient(to bottom, #1f1f1f 0%,#a8a8a8 100% );
}
</style>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
class Action{
constructor(parameter) {
this._data = parameter.data;
this._main_box = parameter.main_box
this.add_html();
}
_sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time*1000));
}
// (async function() {
// await sleep(1);
// })();
add_html (){
let html = '';
for(let i=0; i<this._data.length; i++){
let this_data = this._data[i]
html+='<div class="items-group" style="--delay:'+(i+1 == this._data.length ? i-2 : i-1)+';">'+
'<div class="items-box">'+
'<div class="img">'+
'<img src="'+this_data.img+'" alt="">'+
'</div>'+
'<div class="desc">'+
'<span class="name">'+this_data.name+'</span>'+
'<p>'+this_data.desc+'</p>'+
'</div>'+
'</div>'+
'<a class="follow-btn '+(this_data.follow ? 'del-follow' : '')+'" href="javascript:void(0);">'+(this_data.follow ? '取消-' : '关注+')+'</a>'+
'</div>';
}
this._main_box.html(html);
this.add_event();
}
add_event(){
let that = this;
$('.follow-btn').click(function(){
if($(this).is('.del-follow')){
//删除
that._del_follow($(this));
}else{
//添加
that._add_follow($(this));
}
});
$('.items-group').hover(()=>{
$('.items-group').addClass('no-animation')
}, ()=>{
$('.items-group').removeClass('no-animation')
})
}
_del_follow(obj){
alert('取消成功!');
obj.removeClass('del-follow').html('关注+');
}
_add_follow(obj){
alert('关注成功!');
obj.addClass('del-follow').html('取消-');
}
}
</script>
</head>
<body>
<section class="main-group"></section>
<script type="text/javascript">
let data = [
{
img:'https://q1.qlogo.cn/g?b=qq&nk=78646601@qq.com&s=640',
name:'弥太天空爱1',
desc:'为了你的生蚝，努力加油等待！',
follow: false
},{
img:'https://q1.qlogo.cn/g?b=qq&nk=521565@qq.com&s=640',
name:'弥太天空爱2',
desc:'为了你的生蚝，努力加油等待！',
follow: false
}
,{
img:'https://q1.qlogo.cn/g?b=qq&nk=786466201@qq.com&s=640',
name:'弥太天空爱3',
desc:'为了你的生蚝，努力加油等待！',
follow: false
}
,{
img:'https://q1.qlogo.cn/g?b=qq&nk=88646601@qq.com&s=640',
name:'弥太天空爱4',
desc:'为了你的生蚝，努力加油等待！',
follow: true
}
,{
img:'https://q1.qlogo.cn/g?b=qq&nk=28646601@qq.com&s=640',
name:'弥太天空爱5',
desc:'为了你的生蚝，努力加油等待！',
follow: false
}
];
new Action({data: data, main_box: $('.main-group')});
</script>
</body>电脑端的朋友可以直接点击上面的【运行代码】查看效果
版权声明：本文由 LzxBlog 发布，如需转载请注明出处。
赞助云储存