jQuery实现弹幕效果、文字水平滚动/垂直滚动插件

在写这个插件之前,已经在很多专题页面需要用到弹幕,或者是文字滚动等效果,原理大致相同(也有细微区别),但一直没有封装成插件。也是在这些工作中尝试使用了多种方法,在这里也将一一列举其中的优缺点。

一、使用CSS Animation的解决方案

使用CSS Animation这个解决方案并不好,但这也是我最开始的一个思路。我个人认为这是一个最差的解决方案,在实际使用过程中发现了许多意外的问题。它的兼容性倒是其次,更大的问题是弹幕元素的不可控制,以及窗口失去焦点后,动画暂停,但是JS并没有暂停。这就导致了重新恢复窗口焦点后,弹幕一堆的出现。是一个非常不好的效果。

思路:

使用@keyframes定义一个移动的动画,通过JS动态的加载弹幕元素到显示区域边缘,并指定相应的类。那么添加的元素就会执行我们定义的这个移动动画。那么这个弹幕的效果就实现了。当然这些元素都是绝对定位元素。

这个解决方案的思路大致就是这样,但其本身的局限性导致我不去使用它,就不拆开细说。

二、使用相对定位偏移的解决方案

使用这种方法较上一个方法效果好了很多,这个方法我之前都是用于列表滚动。并没有考虑用在弹幕这种效果上,那么该如何去实现呢?

思路:

这里的所说的相对定位并不是说设置元素的position值为relative。当然这样设置之后使用left/right/top/bottom来做偏移也是能实现这个效果的,但是在这里我是使用的margin来做偏移。效果与设置position值为relative一样。

效果:

因为当时无法提供json数据,所以数据都是渲染到页面上的。

JS:

var barrage = function (val) {
            this.box = $("#j-head-list .ui-repeater");
            this.item = $("#j-head-list .ui-repeater .ui-repeater-item");
            //保存第一个列表盒子 
            this.listBox1 = $("#j-head-list .list_01");
            this.listBox2 = $("#j-head-list .list_02");
            // 保存数据 
            this.data = [];
            // 需要暂停的元素
            this.stopItem = null;
            // 首次渲染长度 
            this.firstLen = 10;
            this.init();
        };
        barrage.prototype = {
            init: function () {
                this.getData();
                //this.news(); 
            },
            //获取并整理数据 
            getData: function () {
                var self = this;
                var item = $.makeArray(this.item);
                for (var i in item) {
                    this.data.push(item[i].innerHTML.trim());
                }
                this.data.forEach(function (item, index, array) {
                    self.data[index] = item.replace(/\[tgc/g, "[");
                });
                this.box.html("");
                this.renderer();
            },
            //新闻列表整理 
            news: function () {
                var item = $(".news_list .ui-repeater").html().toString();
                item = item.replace(/\[tgc/g, "[");
                $(".news_list .ui-repeater").html(item);
            },
            //悬浮暂停 
            hoverStop: function () {
                var self = this;
                this.box.hover(function () {
                    var $this = $(this);
                    if ($this.hasClass("list_01")) {
                        self.stopItem = 1;
                    } else {
                        self.stopItem = 2;
                    }
                }, function () {
                    self.stopItem = null;
                })
            }, //渲染数据
            renderer: function () {
                var self = this, start, dataLen = this.data.length;
                //第一次渲染数据 
                var index = 0;
                for (start = 0; start < this.firstLen; start++) {
                    var _html = '<li class="ui-repeater-item" style="display: inline-block">' + this.data[index] + '</li>';
                    if (start % 2 == 0) {
                        this.box.eq(0).append(_html);
                    } else {
                        this.box.eq(1).append(_html);
                    }
                    index++;
                    if (dataLen < this.firstLen) {
                        if (index == dataLen) {
                            index = 0
                        }
                    }
                }
                this.hoverStop();
                //添加数据 
                var left1 = 0, left2 = 0, width1, width2;
                dataMonitor();
                getWidth();
                var time = setInterval(function () {
                    //保存第一次宽度 
                    if (left1 < width1 && self.stopItem != 1) {
                        self.listBox1.css("margin-left", -(++left1) + 'px')
                    } else if (left1 >= width1 && self.stopItem != 1) {
                        var _html = '<li class="ui-repeater-item" style="display: inline-block">' + self.data[++start] + '</li>';
                        self.listBox1.children().eq(0).remove();
                        self.listBox1.css("margin-left", '-1px');
                        self.listBox1.append(_html);
                        left1 = 1;
                        dataMonitor();
                        getWidth();
                    }
                    if (left2 < width2 && self.stopItem != 2) {
                        self.listBox2.css("margin-left", -(++left2) + 'px')
                    } else if (left2 >= width2 && self.stopItem != 2) {
                        var _html = '<li class="ui-repeater-item" style="display: inline-block">' + self.data[++start] + '</li>';
                        self.listBox2.children().eq(0).remove();
                        self.listBox2.css("margin-left", '-1px');
                        self.listBox2.append(_html);
                        left2 = 1;
                        dataMonitor();
                        getWidth();
                    }
                }, 30);

                function getWidth() {
                    width1 = self.box.eq(0).children().eq(0).css("width");
                    width2 = self.box.eq(1).children().eq(0).css("width");
                    width1 = parseInt(width1.substring(0, width1.indexOf('px'))) + 50;
                    width2 = parseInt(width2.substring(0, width2.indexOf('px'))) + 50;
                }

                function dataMonitor() {
                    if (start + 1 >= dataLen) {
                        start = -1;
                    }
                }
            }
        };
        new barrage({});

从上面的代码可以看出,其实这个方法也是有瑕疵的,速度调节我们需要依赖setInterval的时间,或者是每执行一次时间循环元素的偏移量增大一点。但是无论怎么写,都会有滚动的顿挫感,不够平滑。那有什么方法来解决这些问题呢?

三、基于requestAnimationFrame的解决方案

使用requestAnimationFrame应该是最好的一个解决方案了(就我的眼界来看),并结合translate3d() 做偏移,简直是完美。那么要使用requestAnimationFrame,我们就要知道什么事requestAnimationFrame,那么久简单的介绍一下:

requestAnimationFrame:

window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接受一个函数为参,该函数会在重绘前调用。

如果你想做逐帧动画的时候,你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率。如果是后台标签页面,重绘频率则会大大降低。

回调函数只会被传入一个DOMHighResTimeStamp参数,这个参数指示当前被 requestAnimationFrame 序列化的函数队列被触发的时间。因为很多个函数在这一帧被执行,所以每个函数都将被传入一个相同的时间戳,尽管经过了之前很多的计算工作。这个数值是一个小数,单位毫秒,精确度在 10 µs。

需要注意的是:如果想得到连贯的逐帧动画,函数中必须重新调用 requestAnimationFrame()。

语法:

*requestID* = window.requestAnimationFrame(*callback*); // Firefox 23 / IE10 / Chrome / Safari 7 (incl. iOS) 
requestID = window.mozRequestAnimationFrame(*`callback`*); // Firefox < 23 
requestID = window.webkitRequestAnimationFrame(callback); // Older versions Chrome/Webkit

我们可以看到上面有兼容性写法,是的,其本身兼容性不太好,但是支持大部分的现代浏览器。但这不符合我们工作的需要,这我们不用担心,Opera浏览器的技术师Erik Möller 把这个函数进行了封装,使得它能更好的兼容各种浏览器。

(function () {
        var lastTime = 0;
        var vendors = ['webkit', 'moz'];
        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
        }
        if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
        if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
    }());

这样,我们就可以放心的使用这个方法了。但仅限于现代浏览器。IE9+是没问题的。至于它的其他信息可以点击这里查询

效果:

requestAnimationFrame

需要源码的同学可以点击这里下载