jq+插件实现循环播放弹幕弹幕

最新推荐文章于 2022-08-11 10:47:20 发布

艳艳啊

最新推荐文章于 2022-08-11 10:47:20 发布

阅读量627

点赞数 2

分类专栏： jq 文章标签： javascript jquery html5

本文链接：https://blog.csdn.net/weixin_45132713/article/details/114884594

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求：在页面实现一个循环播放的弹幕功能，高度和速度可调整。可改变弹幕字体颜色，可设置弹幕背景和弹幕对应的头像。

技术：js+jq+barrager.js插件

引入jq 、barrager.js和barrager.css。注意引入的顺序
给定容器container

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/css/barrager.css">
</head>

<body>
    <div class="container" style="width: 100%;height: 100%;position: relative;">
    </div>
</body>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="./dist/js/jquery.barrager.js"></script>
<script src="./dm.js"></script>
</html>

js的实现代码

$(function (n) {
    "use strict";
    var n = {
        data: [],
        init: function () {
            n.data = [
                '中级会计考二年科目应该怎么搭配？',
                '中级会计好考不？',
                '中级会计证书丢了怎么补办？',
                '北京报中级会计师需要居住证吗？',
                '成都中级会计补贴是多少？',
                '中级会计师三科大纲变动大吗？',
                '中级会计考二年科目应该怎么搭配？',
                '什么时候可以查询2020年中级会计师电子证书？',
                '全日制大四实习是否计入工作年限？',
                '中级会计报名时信息采集学历填写错误怎么办，能通过审核吗？',
                '中级会计审核分几次？拿证时还会再审核吗？',
                '中级会计财务管理考试都是机考吗？',
                '中级会计师考试难度怎么样？',
                '中级会计职称证书管理号是什么？',
                '去年考过，今年报名还需要信息采集吗？',
                '21年非全日制大专能参加中级会计考试吗？',
                '2021年中级会计职称教材可以买了吗？',
                '可以先考中级会计职称，再考初级吗？',
                '工作年限不够可以报考中级吗？',
                '因疫情停考顺延了一年，2021年报考还用报吗？',
                '中级会计考二年科目应该怎么搭配？'
            ];
            n.timer = setInterval(function () {
                var item = {
                    img: '', //图片 
                    info:n.data[Math.floor(Math.random()*(n.data.length-1))], //文字 
                    href:'http://www.yaseng.org', //链接 
                    close: true, //显示关闭按钮 
                    speed: 14, //延迟,单位秒,默认8
                    bottom: Math.floor(Math.random()*70+70), //距离底部高度,单位px,默认随机 
                    color: '#fff', //颜色,默认白色 
                    old_ie_color: '#000000', //ie低版兼容色,不能与网页背景相同,默认黑色 
                }
               $('.container').barrager(item);
            },  2000)

        }
    }
    n.init();
})

tips:如果不需要实现循环的弹幕可以不用定时器。视需求而定

效果：

艳艳啊

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jq+插件实现循环播放弹幕弹幕

需求：在页面实现一个循环播放的弹幕功能，高度和速度可调整。可改变弹幕字体颜色，可设置弹幕背景和弹幕对应的头像。技术：js+jq+barrager.js插件引入jq 、barrager.js和barrager.css。注意引入的顺序给定容器container<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-
复制链接

扫一扫

专栏目录