首页 前端知识 js 走马灯效果 无缝 不断实现

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

2024-04-09 23:04:58 前端知识 前端哥 568 263 我要收藏

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

犯困犯困

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4732.html
标签
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!