JS 无间隙滚动封装

小灰灰 2021-09-16 03:24 269阅读 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 条评论，269人围观）

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

相关阅读

相关【无标题】封装类

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

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

相关 js楼层滚动

布局 < div id="center"> < ul> < li

妖狐艹你老母/ 2023年06月25日 10:06/ 0 赞/ 63 阅读

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

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

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

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

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

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

相关 Vue封装滚动表格组件

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

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

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

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

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

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

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

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

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

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

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

相关 JS 无间隙滚动封装

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

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

相关 js 滚动条属性、设置滚动条滚动速度

返回不带px的数值,没用负数,最小为0 .scrollTop 竖直滚动条到顶部的距离,即浏览器视口外的高度 .scrollLeft 水平

冷不防/ 2021年07月24日 20:07/ 0 赞/ 1975 阅读