marquee无缝滚动

布满荆棘的人生 2022-08-30 11:39 217阅读 0赞

## marquee无缝滚动 ##

利用i5scroll进行二次封装

> 为了满足工作需求进行二次封装

~(function ($, window, document, undefined) { 
        class Scroll { 
            constructor(eles, opts) { 
                let num = eles.find('li').length
                this.$eles = eles;
                opts = opts || { };
                this.defaults = { 
                    mode: 'CSS',
                    cssSpeed: num * 3,
                    jsSpeed: 'normal',
                    heightLI: ''
                };
                this.options = $.extend(true, { }, this.defaults, opts);
                this.options.jsSpeed = this.handleJsSpeed(this.options.jsSpeed);
                this.init();
            }
            init() { 
                this.handleEve();
            }
            handleJsSpeed(sp) { 
                switch (sp) { 
                    case 'slow':
                        return 50;
                    case 'normal':
                        return 30;
                    case 'fast':
                        return 15;
                }
            }
            handleEve() { 
                const _this = this;
                this.$eles.each(function (i, domEle) { 
                    _this.cloneNode(domEle);
                    _this.initValue(domEle);
                    _this.wrapDiv(domEle);
                    _this.createKeyframes();
                    if (_this.options.mode === 'CSS') { 
                        _this.moveByCss(domEle);
                        _this.handleHoverByCss(domEle);
                    } else { 
                        _this.moveByJs(domEle);
                        _this.handleHoverByJs(domEle);
                    }
                });
            }
            cloneNode(ele) { 
                $(ele).children().clone().appendTo($(ele));
            }
            initValue(ele) { 
                $(ele).css({ 
                    margin: 0,
                    padding: 0
                });
                ele.num = 0;
                const o = $(ele).parents(":hidden").eq($(ele).parents(":hidden").length - 1);
                o.css({ 
                    display: 'block'
                });
                // ele.h = parseInt($(ele).outerHeight(true) / 2);
                // To prevent the father setting display: flex; from affecting the height of the child element
                let sum = 0;
                $(ele).children().each(function (i, item) { 
                    sum += $(item).outerHeight(true);
                });
                ele.h = parseInt(sum / 2);
                o.css({ 
                    display: 'none'
                });
            }
            wrapDiv(ele) { 
                const _this = this;
                $(ele).wrap($('<div style="height: ' + _this.options.heightLI + 'rem; overflow: hidden; padding: 0">'));
            }
            createKeyframes() { 
                const runkeyframes = '@keyframes IFER_MOVE {100%{transform: translateY(-50%);}}';
                const style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = runkeyframes;
                document.querySelector('head').appendChild(style);
            }
            moveByCss(ele) { 
                $(ele).css({ 
                    animation: 'IFER_MOVE ' + this.options.cssSpeed + 's linear infinite'
                });
            }
            handleHoverByCss(ele) { 
                $(ele).hover(function () { 
                    $(this).css('animation-play-state', 'paused');
                }, function () { 
                    $(this).css('animation-play-state', 'running');
                });
            }
            moveByJs(ele) { 
                clearInterval(ele.timer);
                ele.timer = setInterval(() => { 
                    if (Math.abs(ele.num) === ele.h) { 
                        ele.num = 0;
                    } else { 
                        $(ele).css('transform', 'translateY(' + ele.num + 'px)');
                    }
                    ele.num--;
                }, this.options.jsSpeed);
            }
            handleHoverByJs(ele) { 
                const _this = this;
                $(ele).hover(function () { 
                    clearInterval(ele.timer);
                }, function () { 
                    _this.moveByJs(ele);
                });
            }
        }
        $.fn.i5Scroll = function (options) { 
            new Scroll(this, options);
        };
    })(jQuery, window, document);

> 将上方js作为一个文件引入项目中  
> 在js中使用`$("#marq").i5Scroll({ heightLI:2.1 });` heightLI是设置滚动框得高度 因为是手机端所以单位是rem ，速度我设置成了个数得三倍，嫌慢得自己调，

![在这里插入图片描述][20210720093400848.png]  
js使用

$("#marq").i5Scroll({
        heightLI:2.1
      });

这里是4个参数，有两种选则，一种js，一种css，有需求自己去改，欢迎点赞

[20210720093400848.png]: /images/20220829/e735f4c719464eb79db55b9550337b1a.png