【代码】实现文字滚动的js插件

自己写着玩的，把代码贴出来

各位大佬不要喷，给点建议嘛~

这个版本先是从右到左，后期我会加方向的参数

/*-----------------------------------------------
 *      name :文字平滑滚动
 *      time :2020-06-18
 *      author :danny chan (xiaozhong0836@gmail.com)
 *--------------------------------------------*/

$(function () {
    $.fn.extend({
        "toTextScroll": function (time) {
            var aniName = "toTextScrollAnimate" + Date.parse(new Date());
            var current = $(this);
            if (current != undefined && current != null) {
                var par = current.parent();
                var keyfremes = "@keyframes " + aniName + " {  from { transform: translateX(100%);}to { transform: translateX(-100%);}}";
                var styleelement = $("<style>" + keyfremes + "</style>");
                $("head").append(styleelement);
                par.css({ "overflow": "hidden" });
                current.css({"white-space": "nowrap", "display": "inline-block", "animation": aniName + " " + time + "s" + " linear infinite" });
            } else {
                console.warn("文字滚动的目标元素不存在哦");
            }
        }
    });

});

使用方法

$(element).toTextScroll(time);//time是总共执行的秒数，值越小，越快
//如
$("#title").toTextScroll(10);

微信扫码查看本文