js 走马灯效果 无缝 不断实现

前言：网上找了半天 都说无缝 用来了后面一篇空白 有一点原因就是因为用在我们项目本身的时候 我们自己的高度更别人的不一样 所以我们要自己计算 然后就自己写了一个 这个上下左右都可以 如果要向右 就修改js中的 margin-top=margin-left   height=width heigt这个我是获取元素的高度 不是写死的 如果你的单位是rem 这里就要把高度写死

我做的时候还有做了定时刷新 分页 不过删掉了 这里就做了滚动 如果有需求可以问我 

没录制动的效果可以复制自己预览 

我们现在来看看代码截图

 1.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 += `${i + 1}${data[i].title}${data[i].name}`;}$("#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 / dataLengthif (dataLength <= 4) {// 这里判断我是每次出现小于4条的时候 高度才会平均分$("#listID .list").attr("style", "height:" + h + "px");}
}

犯困犯困

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！