前言：网上找了半天 都说无缝 用来了后面一篇空白 有一点原因就是因为用在我们项目本身的时候 我们自己的高度更别人的不一样 所以我们要自己计算 然后就自己写了一个 这个上下左右都可以 如果要向右 就修改js中的 margin-top=margin-left height=width heigt这个我是获取元素的高度 不是写死的 如果你的单位是rem 这里就要把高度写死
我做的时候还有做了定时刷新 分页 不过删掉了 这里就做了滚动 如果有需求可以问我
没录制动的效果可以复制自己预览
我们现在来看看代码截图
1.html代码 这里最开始写的时候 就随便写了几个标签都有问题 后面看了别人的大概都用了三个盒子 才能运行 就是为了后面不留空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>走马灯</title>
<style>
#boxID{width:500px;height:300px;margin:0 auto;overflow:hidden;background:black;box-sizing:border-box;padding:0 10px;}
.list-box .list{width:100%;display:flex;padding:0 10px;align-items:center;height:75px;box-sizing:border-box;border-bottom:1px solid #ccc;}
.list-box .list span{width:100%;font-size:18px;color:#ddd;flex:1;text-align:center;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.list-box .list:last-child{border-bottom:1px solid red;}
</style>
</head>
<body>
<div id="boxID">
<div id="listBoxID">
<div class="list-box" id='listID'>
</div>
</div>
</div>
<script src="./jQuery3.6.0.js"></script>
<script src="./yqq.js"></script>
</body>
</html>2.js代码 我的列表是直接循环渲染上去的 方便做很多操作 自己也可以不用
// 这里是我们的列表数据
let data = [ { title: "你好丫", name: '小明' }, { title: "美好的一天", name: '小红' } ];
var scrollTop = null;// 保存scrollTop实列
// 创建一个走马灯类方法
class ScrollTop {
constructor(options, box, id) {
this.time;
this.options = options;
this.id = id;
this.obj = $(box);
this.height = $(box).find(this.id).height();
this.value = 0;
}
statr() {
// 添加一些数据使头尾相连
this.obj.find(this.id).clone().appendTo(this.obj);
this.time = setInterval(() => {
this.value++;
if (this.value > this.height) this.value = 0;
this.obj.find(this.id).first().css("margin-top", -this.value);
}, this.options);
}
anew() {
this.height = this.obj.find(this.id).height();
}
}
!(function () {
listitembox();
})();
// 数据渲染页面
function listitembox(params) {
var str1 = "";
for (var i = 0; i < data.length; i++) {
str1 += `
<div class="list">
<span>${i + 1}</span>
<span>${data[i].title}</span>
<span>${data[i].name}</span>
</div>
`;
}
$("#listID").html(str1);
ifHeight(data.length, 2);
// 调用类(移动速度，主元素id，子元素id)
scrollTop = new ScrollTop(15, "#boxID", "#listBoxID");
scrollTop.statr();
}
// 这里做判断是为了不然数据只有几条的时候 滚动到最后面出现空白
// 根据数据长度判断设置高度 这里我们是看主盒子的高度来定义每条数据有多高
// 比如主盒子高度是300 数据只有2两条 我们就用300/2得到每条数据的高度
function ifHeight(dataLength) {
let heigt = $("#boxID").height() // 获取主盒子的高度
let h = heigt / dataLength
if (dataLength <= 4) {// 这里判断我是每次出现小于4条的时候 高度才会平均分
$("#listID .list").attr("style", "height:" + h + "px");
}
}犯困犯困
