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

2020-06-18 17:20:35  阅读 155 次 评论 0 条

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

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

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

/*-----------------------------------------------
 *      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);


本文地址:https://www.yangguangdream.com/?id=2078
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?