当前位置：首页 > 技术博客 > JQuery > 关注列表缩放滚动效果

关注列表缩放滚动效果

4年前 (2021-08-11)JQuery929

使用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 发布，如需转载请注明出处。

本文链接：https://www.liuzhixi.cn/html/141.html

标签: 上下滚动
返回列表

上一篇：基于jQuery的拖拽效果

下一篇：jQuery仿百度搜索引擎

相关文章

jq scroll()和resize() 的优化

jq scroll()和resize() 的优化

在最近的一个项目中我使用到了jq中的scroll()和resize()方法来检测用户滚动/调整浏览器窗口并运行相关代码。可以注意到scroll()、resize...

jQuery响应式工作室类网站模板

jQuery响应式工作室类网站模板

简洁创意的jQuery响应式工作室类网站模板下载链接：https://pan.baidu.com/s/17qCoDvqTAt98mygA4b4jCQ ...

jQuery动态数据流程步骤条特效

jQuery动态数据流程步骤条特效

jQuery动态数据流程步骤条特效，事先设置好需要走的流程步骤，然后根据状态进行判断走到哪一步，审批意见是什么，支持动态数据配置。<html>&nb...

jQuery html5背景视频插件

jQuery html5背景视频插件

vidbacking是一款响应式的，跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景使用方法在页面...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

ICP
提供技术支持 赞助云储存