<!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. 验证码(captcha)的由来

    如果您允许用户在您的网站上发表内容,如留下评论和创建用户配置文件,那么您可能会看到,垃圾留言散播者试图利用这些渠道来给他们自己的网站创造流量.在您的网站上出现这类垃圾留言,对任何人来说都不愉快.用户可 ...

  2. python 字符串,bytes和hex字符串之间的相互转换

    import binascii datastr='13'#string 类型转换为bytedataByte=str.encode(datastr)#byte串 转换为16进制 byte串 ,比如 b' ...

  3. MySQL数据查询结果导出生成文件

    select url from news where url like "%美女%"  into outfile  "/导出的文件路径" : 在这里有个坑,对于 ...

  4. linux的理解

    1.用户组 因为linux 是多人多任务系统 所有可能有很多人在主机人作业.比如 有A B C D 4个人 在linux主机上作业, A B C 3个人 在做同一个项目 建了一个文件夹这个文件只能A ...

  5. Qt 学习之路 2(14):对话框数据传递

    Home / Qt 学习之路 2 / Qt 学习之路 2(14):对话框数据传递 Qt 学习之路 2(14):对话框数据传递  豆子  2012年9月15日  Qt 学习之路 2  53条评论 对话框 ...

  6. git ssh密钥的使用

    //配置邮箱,用户名, git config --global user.name git config --global user.email git config --global --list ...

  7. python解决excel工作薄合并处理

    年度了,要对每个月的数据进行总的汇总,去计算每消耗品的使用情况,表格都在一个工作表的不同sheet中,并且格式相同,所以就用python写了这个小脚本,现在把脚本粘贴出来,以后有需要就可以在此基础上改 ...

  8. Python模块:operator简单介绍

    Python官方文档地址:https://docs.python.org/3.6/library/operator.html?highlight=operator Operator提供的函可用于对象比 ...

  9. Python中的数据类型和数据结构

    一.数据类型 Python中有六个标准数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Sets(集合) Dictionary(字典) 其中,除列表Lis ...

  10. QQ号_保存_20180124

    1.1337978907 (密码:33+我的名字全小写全部拼音) 2. 3. 4. 5.