该方法可能有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. rhce 第十题 配置NFS服务

    配置NFS服务 在system1配置NFS服务,要求如下: 以只读的方式共享目录/public,同时只能被group8.example.com域中的系统访问 以读写的方式共享目录/protected, ...

  2. FM(Factorization Machines)模型详解

    优点 FM模型可以在非常稀疏的数据中进行合理的参数估计,而SVM做不到这点 在FM模型的复杂度是线性的,优化效果很好,而且不需要像SVM一样依赖于支持向量. FM是一个通用模型,它可以用于任何特征为实 ...

  3. JavaSE基础知识（5）—面向对象（Object类）

    一.包 java.lang包,属于java中的核心包,系统默认导入的,不用手动导入该包中的类:Object.System.String.Integer等 1.包的好处 ①分类管理java文件,查找和管 ...

  4. JS判断图片是否加载完成 背景图404 快到碗里来

    面对这个问题 我最多做到表面笑嘻嘻 …… 真不知道测试怎么那么…… 啥都能给你测出来 有的没的都能给你测出来 算了算了  谁让本仙女本精灵本可爱温柔大方善解人意呢 …呵呵呵 ————————————正 ...

  5. Webmagic 爬虫框架 爬取马蜂窝、携程旅游、汽车之家游记信息

    WebMagic学习 遇到的问题 Log4j错误 解决:在src目录下添加配置文件 log4j.properties log4j.rootLogger=INFO, stdout, file log4j ...

  6. 设计模式学习心得<代理模式 Proxy>

    在代理模式(Proxy Pattern)中,一个类代表另一个类的功能.这种类型的设计模式属于结构型模式. 在代理模式中,我们创建具有现有对象的对象,以便向外界提供功能接口. 概述 意图 为其他对象提供 ...

  7. logstash 修改配置不重启的方法

    1.修改好yml配置 2.进入logstash 容器内,或服务器上 3.ps -ef | grep logstash 拿到进程号 4.kill -1 <pid> 5.logstash 会重 ...

  8. Asp.net Zero 应用实战-最初部署问题

    此时用的是aspnet-zero-core-4.3.0 1.前两天vs2017刚刚最新升级了,打开后就报错,然后就根据提示把每个项目文件中添加了 <PropertyGroup> <E ...

  9. Jquery源码学习日记(1)

    https://jquery.com/  最新源码下载链接:jquery3.0 135-231定义了一些jquery的通用方法 233-301行定义了一些继承的方法 302-477定义了一些工具类方法 ...

  10. Sublime 中文乱码问题

    今天在Windows上使用Sublime Text 3的时候,发现一些txt文本打开以后,中文都是乱码.于是搜了一下,找到了解决方案. 步骤: 在Sublime Text里,按ctrl+`,打开Con ...