前言：网上找了半天 都说无缝 用来了后面一篇空白 有一点原因就是因为用在我们项目本身的时候 我们自己的高度更别人的不一样 所以我们要自己计算 然后就自己写了一个 这个上下左右都可以 如果要向右 就修改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"); } }
犯困犯困
