JS 无间隙滚动封装-蒲公英云

JS 无间隙滚动封装

小灰灰 2021-09-16 03:24 300阅读 0赞

新建一个页面魔板：引入 JS 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无间隙滚动</title>
</head>
<style> ul{ list-style: none; } *{ padding: 0; margin: 0; } #box1{ width: 300px; height: 100px; border: 1px solid #ccc; } #box2{ width: 100px; height: 300px; border: 1px soild #cccccc; } ul li{ float: left; width: 100px; height: 100px; } </style>
<body>
  <div id="box1">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <br/>
  <hr/>
  <div id="box2">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</body>
<script src="scoller.js"></script>
</html>

scoller.js 文件

function Scroll(options){ 
  this.el = document.getElementById(options.el);
  this.ul = this.el.getElementsByTagName("ul")[0];
  this.li = this.ul.getElementsByTagName("li");
  this.direction = options.direction;
  this.speed = options.speed;
  this.index = 0;
  this.init();
}
Scroll.prototype = {
  init:function(){ 
    // 效果的开始
    this.li_num = this.li.length;
    this.el.style.overflow = 'hidden';
    if(this.direction == "x"){
      // 设置宽
      this.change("width","marginLeft");
    }else if(this.direction == "y"){
      // 设置高
      this.change("height","marginTop");
    }
  },
  change:function(attr1,attr2){ 
    var _this = this;
     // 定时器内容
     this.li_attr = parseInt(this.getAttr(attr1));
     this.ul.style[attr1] = this.li_num * this.li_attr + "px";
     setInterval(function() { 
       // body...
       _this.index--;
       _this.ul.style[attr2] = _this.index + "px";
       if( Math.abs(_this.index) >= _this.li_attr ){
         _this.ul.appendChild(_this.ul.firstElementChild);
         _this.ul.style[attr2] = "0px";
         _this.index = 0;
       }
     }, _this.speed);
  },
  getAttr:function(attr){ 
     // 获取样式值的
     if (this.li[0].currentStyle) {
       return  this.li[0].currentStyle[attr]
     }else{
       return getComputedStyle(this.li[0],null)[attr]
     }
  }
};
new Scroll({
  el: "box1",
  direction: "x",
  speed: 50,
})
new Scroll({
  el: "box2",
  direction: "y",
  speed: 30,
})