<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>js实现弹幕效果</title>

    <style>

        #play {

            width: 600px;

            height: 500px;

            background-color: #000;

        }

        /*方便js获取高度*/

        #danmu{

            width:600px;

            height:500px;

            background-color:#fff;

            z-index:9999;

            background-color: rgba(0, 1, 0, 0.1);

        }

        #textStyle {

            position: absolute;

            font-size: 24px;

            color: #ffffff;

        }

    </style>

</head>

<body>

<div id="play">

    <div id="danmu"></div>

</div>

<input type="text" id="text" value="这是弹幕..."/>

<input type="button" value="发送" onclick="danmu()"/>

<script src="jquery-3.1.0.min.js"></script>

<script>

    var si; // 初始化定义定时器变量

    function danmu() {

        // 每次执行弹幕函数的前清除一次定时器

        clearInterval(si);

        var text = $('#text');

        var danmu = $('#danmu');

        var textStyle = '<span id="textStyle">' + text.val() + '</span>';

        danmu.get(0).innerHTML = textStyle;

        var textTop = Math.round(Math.random()*danmu.height()) + 'px';

        var textLeft = danmu.width() + 'px';

        var textStyleObj = $('#textStyle');

        textStyleObj.css({

            'left': textLeft,

            'top': textTop

        });

        var x = parseInt(textStyleObj.css('left'));

        //console.log(x);

        //textMove(x);

        var animateLeft = 600;

        si = setInterval(function () {

            if(animateLeft < -parseInt(textStyleObj.width())) {

                // 停止定时器，清空弹幕

                clearInterval(si);

                danmu.text('');

                //console.log('清除定时器');

            }else {

                // 弹幕的left值减一

                animateLeft--;

                //console.log(animateLeft);

            }

            textStyleObj.css('left', animateLeft + 'px');

        }, 10);

    }

</script>

</body>

</html>

js实现弹幕效果的更多相关文章

  1. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  2. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

  3. marquee标签弹幕效果

    播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...

  4. js实现弹幕

    弹幕是一个很常见的功能,下面是本人封装的一个小小的实现方案,存在不足之处可以提出来或自由改进. 直接上代码:复制可运行 <!DOCTYPE html> <html> <h ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  7. 又一枚精彩的弹幕效果jQuery实现

    精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下   简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失.   涉及知识点:val().random ...

  8. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

随机推荐

  1. Oracle恢复表数据

    Oracle恢复数据 在oracle 10g以及之后的版本,提供了回收站的机制,为了防止误操作将表数据清空而有回收机制. 换句话说,我们删除的表不会立马消失,而是进入回收站.下面我们可以查看回收站 查 ...

  2. 拓扑排序/DP【洛谷P2883】 [USACO07MAR]牛交通Cow Traffic

    P2883 [USACO07MAR]牛交通Cow Traffic 随着牛的数量增加,农场的道路的拥挤现象十分严重,特别是在每天晚上的挤奶时间.为了解决这个问题,FJ决定研究这个问题,以能找到导致拥堵现 ...

  3. umask码和文件权限

    umask是chmod配套的,总共为4位(gid/uid,属主,组权,其它用户的权限),不过通常用到的是后3个,例如你用chmod 755 file(此时这文件的权限是属主读(4)+写(2)+执行(1 ...

  4. C语言文件I/O和标准I/O函数

    读取/写入  相对于文件而言 输入/输出 相对于程序/内存而言 一切皆文件,键盘.显示屏也是文件,只不过是特殊的标准文件: 标准文件:标准输入.标准输出.标准错误:---->对应的文件指针:st ...

  5. Java8 流的使用示例

    foreach遍历处理 dataList.stream().forEach(index -> sb.append(dataList.get(index) + "',")); ...

  6. JDK Integer

    1. public static int parseInt(String s, int radix) a. 充分考虑各种异常情况:字符串为空,带符号,进制出界,计算值出界 b. 计算时转换为负数进行处 ...

  7. 工作ui（2）

    做完整个小Demo整理的一些方法和踩过的miniUI的坑,分享出来希望大家批评指正,共同进步. 1.动态创建列:尽量不要直接在html文件里创建列,动态设置在js文件里方面添加.修改等. 首先把列定义 ...

  8. Select语句完整的执行顺序

    Select语句完整的执行顺序:1.from子句组装来自不同数据源的数据:2.where子句基于指定的条件对记录行进行筛选:3.group by子句将数据划分为多个分组:4.使用聚集函数进行计算:5. ...

  9. Head First 设计模式笔记（模版方法模式）

    1.定义: 在一个方法中定义一个算法骨架,而将一些步骤延迟到子类中.模版方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 2.类图:  3.说明: 模版方法可以理解为一个方法里面包 ...

  10. python + selenium 练习篇 - 定位元素的方法

    1.利用ID定位元素(能直接通过ID来定位的元素比较少) # coding=utf-8from selenium import webdriverdriver = webdriver.Chrome() ...