滚动列表实现
程序员文章站
2022-05-29 18:18:01
...
1. 效果图
2. 文件结构
jquery 文件:链接: https://pan.baidu.com/s/1GdW7PfcFo_Pf9c_hRKiaCw 提取码: nqq1 复制这段内容后打开百度网盘手机App,操作更方便哦
3. index.html 基础结构
4. CSS样式
5. JS 逻辑
// 模拟数据
let dataList = [
{ name: '张一山' },{ name: '王晓义' },{ name: '李光洁' },{ name: '张雨绮' },{ name: '陈乔恩' },{ name: '何炅' },{ name: '谢娜' },{ name: '蔡徐坤' },{ name: '王紫娇' },{ name: '刘思彤' },{ name: '吴昕' },{ name: '维嘉' },{ name: '杜海涛' },{ name: '杨幂' },{ name: '刘诗诗' },{ name: '汪涵' },{ name: '杨迪' },{ name: '杨洋' },{ name: '虞书欣' },{ name: '杨超越' }
];
// 计算第一次渲染条数:显示条数(>=4渲染四条,否则全部渲染完)
let len = dataList.length >= 4?4:dataList.length;
// 获取父容器
let $parent = $('#scroll-wrap');
// 先清空容器内内容
$parent.empty();
// 遍历添加默认滚动项
for (let i=0; i<len; i++) {
$parent.append(`
<div class="scroll-item">
<div class="part1-top-item-name">${ dataList[i].name }</div>
</div>`);
};
// 去掉前面已经渲染的内容
dataList = dataList.slice(len);
// 创建定时器
let timer = null;
let isFirst = false;
timer = setInterval(function() {
if (dataList.length > 0) {
let item = dataList.shift();
$parent.append(`
<div class="scroll-item">
<div class="part1-top-item-name">${ item.name }</div>
</div>`);
// 位置重置为0
$('.scroll-item').css({ top: 0 });
if (isFirst){
$('.scroll-item').first().remove();
}
}
$('.scroll-item').animate({
top: "-123px"
}, 500);
isFirst=true;
}, 2000);
6. 完整代码
上一篇: 使用sax解析xml文件
下一篇: 自定义属性和索引值
推荐阅读
-
python定时采集摄像头图像上传ftp服务器功能实现
-
PHP过滤器的实现方法第1/2页_php技巧
-
python逆透视变换试验——利用cv2.getPerspectiveTransform和cv2.warpPerspective函数实现
-
三层+存储过程实现分页
-
[ExtNet] GridPanel怎么实现服务器端分页、排序、查询?--Oracel存储过程分页
-
C语言 关于n*n乘法口诀表(99乘法口诀等都可以实现)
-
使用CSS3实现多列布局与多背景的技巧
-
微信公共服务平台开发(.Net 的实现)4-------语音识别
-
Asp.Net Core + SignalR 实现实时通信
-
自定义view进阶-贝塞尔曲线实现水波动画、粘性控件