JS 无间隙滚动封装

小灰灰 2021-09-16 03:24 227阅读 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,
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关【无标题】封装类

通常情况下我们可以在测试类中给成员变量赋值一些合法但不合理的数据，而程序的执行过程无法检测和提示，与我们现实生活中的实际应用不太符合，为此，我们需要对成员变量进行合理的封装，与

比眉伴天荒/ 2024年03月24日 13:27/ 0 赞/ 38 阅读

相关移动端左右滚动（无滚动条）导航栏

方法一：flex和overflow-y 下面这两条css属性，能够帮助我们实现移动端导航栏，左右滚动，但有滚动条。 display: flex; ov

秒速五厘米/ 2023年03月04日 09:14/ 0 赞/ 3 阅读

相关 JS惯性滚动，加速滚动

<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS惯性滚动，加

- 日理万妓/ 2022年10月29日 13:26/ 0 赞/ 145 阅读

相关 Vue封装滚动表格组件

目录 1、LjSwiperTable 2、LjTableScroll 3、基于el-table封装 4、LjItemScroll ------------------

墨蓝/ 2022年09月04日 02:59/ 0 赞/ 274 阅读

相关素数间隙

素数间隙 Time Limit: 1000ms Memory limit: 262144K 有疑问？点这里^\_^ 题目描述 Neko猫是一个很喜欢玩数字游戏

小鱼儿/ 2022年08月14日 05:35/ 0 赞/ 154 阅读

相关纯JS无间隙文字向上滚动代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

旧城等待，/ 2022年06月16日 09:14/ 0 赞/ 166 阅读

相关间隙锁

间隙锁：用范围条件检索数据时，并请求共享锁或排他锁时，InnoDB都会给符合条件的已有记录的索引项添加锁，对于键值在条件范围内但表中不存在的记录，就叫做间隙（GAP）。Inno

秒速五厘米/ 2022年05月17日 02:21/ 0 赞/ 195 阅读

相关 JQuery插件：动态列和无间隙网格布局Mason.js

日期：2013-6-29 来源：[GBin1.com][] ![JQuery插件：动态列和无间隙网格布局Mason.js][JQuery_Mason.js] [在线演示]

柔情只为你懂/ 2022年01月16日 08:25/ 0 赞/ 149 阅读

相关 CSS制作简单的无间隙格子

[CSS制作简单的无间隙格子][CSS] 效果图： ![Image 1][] 方案: 对每个格子设置margin-left和margin-bottom为负值，大小等于

冷不防/ 2021年10月25日 15:12/ 0 赞/ 187 阅读

相关 JS 无间隙滚动封装

新建一个页面魔板：引入 JS 文件 <!DOCTYPE html> <html lang="en"> <head> <meta

小灰灰/ 2021年09月16日 03:24/ 0 赞/ 228 阅读