该方法可能有bug，毕竟简单粗暴

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

.video {
margin: 50px auto 10px auto;
width: 500px;
height: 500px;
border: 1px solid pink;
}

.btn {
width: 40px;
height: 25px;
background: #26d4bd;
color: #fff;
border: none;
outline: none;
}
.active{
width: 65px;
background: red;
}
.box{
margin: 0px auto;
width: 500px;
height: 500px;
}
</style>
</head>

<body>
<div class="video" id="video"></div>
<div class="box">
<input type="text" id="text"/> <button type="button" id="btn" class="btn">发送</button>
<button type="button" id="clear" class="btn active">清空弹幕</button>
</div>

<script>
$("#btn").click(function(){
$("#video").append('<marquee behavior="scroll" direction="left" loop="1" scrollamount="100" scrolldelay="500">'+$("#text").val()+'</marquee>')
$("#text").val("")
})

$("#clear").click(function(){
$("#video").empty()
})
</script>
</body>

</html>

jQuery-弹幕的更多相关文章

  1. 精彩的jquery弹幕效果

    html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

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

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

  3. jQuery+css3 弹幕

    写了个基于jQuery+css3的弹幕功能,此功能面向手机wap,利用改变位移做弹幕功能会使一些性能低的手机浏览器卡,所以用了css3,此功能不支持非webkit内核浏览器 html部分 自己设置样式 ...

  4. jquery 实现类似于弹幕效果

    在别人网站中看到一个类似于弹幕的效果,闲来无事用jquery写了个备用~~ <!DOCTYPE html> <meta charset="utf-8"> & ...

  5. jQuery Danmmu Player 弹幕视频

    Danmmu Player是基于jQuery的弹幕视频插件.当在看视频的时候,同时发表自己的观点,这样很好的提高用户互动效果.其实也就是在视频界面上做一个滚动展示动画效果,这样的聊天互动视频效果我们叫 ...

  6. jquery animate 制作简单弹幕

    定位滚动条 $("html,body").animate({scrollTop:$(".middle1").offset().top},1000) 弹幕 < ...

  7. jQuery实现评论弹幕、弹幕漂浮、滚动代码

    1.html代码和jquery代码: <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  8. 基于jquery的弹幕实现

    前几天,需要做一个弹幕展示效果,看了网上很多资料,但是很不凑巧,都不能满足自己的需求和功能点,但是总不能放弃吧,那么就自己写一个,今天把成果分享给大家,首先说一下市面上比较流行的弹幕插件吧: 1.有关 ...

  9. JS框架_(JQuery.js)网页文字评论弹幕

    百度云盘 传送门 密码:3azl jQuery网页右下角文字评论弹幕效果 <!DOCTYPE html> <html> <head> <title>jQ ...

  10. 从前端到后端实现弹幕的过程（jsp/Jquery.barrager.js）

    Jquery.barrager.js插件,可以去网上下载!下载完后,就把下载文件中的js文件.css文件.图片文件.等等等文件全部拷贝到你们自己的项目中去,千万别拷贝漏了,如果你怕拷贝漏了什么,那就把 ...

随机推荐

  1. keepalived vip 没有生成或者生成了ping不通？

    1 问题现象:keepalived已启动但vip 没有生成./var/log/messages日志不断刷屏 tail /var/log/messages Nov :: cache-redis- Kee ...

  2. java第八章JDBC

    JDBC实现各种数据库的访问 实现把各种数据存入数据库从而长久保存(JDBC充当了java应用程序于各种不同数据库之间进行对话的媒介) JDBC工作原理 JDBC API由Sun公司提供,主要包括Co ...

  3. npm与cnpm的install无反应

    问题描述 1.npm -v检查版本正常,npm install安装依赖提示超时 2.cnpm -v检查版本正常,cnpm install安装依赖无反应(输入命令后没有任何提示,一直卡在那) 解决(参考 ...

  4. 【Rails App】 应用服务器从Passenger切换为Puma, Grape出现线程安全问题

    Grape中的代码如下: def market @market ||= Market.find(params[:id]) end @market基于类层次的实例变量,属于非线程安全,如果一直使用多线程 ...

  5. Oracle定时任务Job笔记

    定时任务应用场景: 某一个生产系统上面,临时表不断变多,占了不少磁盘空间.由于这套软件是直接买的,不方便修改源代码.所以考虑使用Oracle定时任务直接从数据库层删除临时表. 定时任务业务: 首先写好 ...

  6. 4.7做作业时发现，内联元素设置宽高背景以后正常不显示，但是设置了position：absolute；以后就可以显示了。起到了和display：block；一样的效果。然后查了一下知道了。

    如果内联元素定位属性设置为:absolate,元素脱离文档,即使a元素中没有内容,设置的背景依然会显示!

  7. python基础 (初识函数&函数进阶)

    函数基础部分 .什么是函数? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率. 2.定义函数 定义:def 关键词开头,空格之后接函数名 ...

  8. VirtualBox虚拟机E_INVALIDARG (0x80070057)

    转自:http://www.wzwzl.com/zblog/blog_wz/32.html 打开以前的VirtualBox虚拟机文件时,错误提示:返回 代码:E_INVALIDARG (0x80070 ...

  9. zabbix监控配置与邮件告警

    添加主机与主机组 进入web页面,在 配置-主机群组,创建主机群组 在 配置-主机,新建主机 在可见的名称中建议填写为类似 主机类型-主机名-IP或域名 的格式,如Web-Hyrule001-192. ...

  10. 【Mybatis】MyBatis之表的关联查询（五）

    本章介绍Mybatis之表的关联查询 一对一关联 查询员工信息以及员工的部门信息 1.准备表employee员工表,department部门表 CREATE TABLE `employee` ( `i ...