jQuery-弹幕
该方法可能有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-弹幕的更多相关文章
- 精彩的jquery弹幕效果
html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 又一枚精彩的弹幕效果jQuery实现
精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下 简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random ...
- jQuery+css3 弹幕
写了个基于jQuery+css3的弹幕功能,此功能面向手机wap,利用改变位移做弹幕功能会使一些性能低的手机浏览器卡,所以用了css3,此功能不支持非webkit内核浏览器 html部分 自己设置样式 ...
- jquery 实现类似于弹幕效果
在别人网站中看到一个类似于弹幕的效果,闲来无事用jquery写了个备用~~ <!DOCTYPE html> <meta charset="utf-8"> & ...
- jQuery Danmmu Player 弹幕视频
Danmmu Player是基于jQuery的弹幕视频插件.当在看视频的时候,同时发表自己的观点,这样很好的提高用户互动效果.其实也就是在视频界面上做一个滚动展示动画效果,这样的聊天互动视频效果我们叫 ...
- jquery animate 制作简单弹幕
定位滚动条 $("html,body").animate({scrollTop:$(".middle1").offset().top},1000) 弹幕 < ...
- jQuery实现评论弹幕、弹幕漂浮、滚动代码
1.html代码和jquery代码: <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- 基于jquery的弹幕实现
前几天,需要做一个弹幕展示效果,看了网上很多资料,但是很不凑巧,都不能满足自己的需求和功能点,但是总不能放弃吧,那么就自己写一个,今天把成果分享给大家,首先说一下市面上比较流行的弹幕插件吧: 1.有关 ...
- JS框架_(JQuery.js)网页文字评论弹幕
百度云盘 传送门 密码:3azl jQuery网页右下角文字评论弹幕效果 <!DOCTYPE html> <html> <head> <title>jQ ...
- 从前端到后端实现弹幕的过程（jsp/Jquery.barrager.js）
Jquery.barrager.js插件,可以去网上下载!下载完后,就把下载文件中的js文件.css文件.图片文件.等等等文件全部拷贝到你们自己的项目中去,千万别拷贝漏了,如果你怕拷贝漏了什么,那就把 ...
随机推荐
- gerapy 实现自动化部署
1 安装 2 在需要部署的目录下运行 gerapy init 会在当前目录下生成一个gerapy目录,并在gerapy目录下有一个projects 目录 3 切换到gerapy 目录 cd gerap ...
- 微信支付遇到的坑---缺少参数total_fee
今天在做微信砍价成功后支付,出现了这个报错 看到报错后,去找total_fee这个参数,调试了半天,total_fee是确定有值的 微信支付的步骤 ① 预支付 商户号,商户秘钥,appid,appse ...
- Tomcat开启本地库(Apache Tomcat Native Library)支持
操作系统环境:Ubuntu 17 amd64位 软件环境:Tomcat 9 tomcat安装位置:/opt/tomcat JDK:1.8.144 64位 安装步骤: 1:编译安装 cd /opt/t ...
- 微信小程序登录流程
小程序登录流程 参考 app.js需要做的 1,首先通过wx.login()拿到code,成功之后,发送数据,请求接口,把code发送给后端,换区openid,sessionKey,unionId,把 ...
- 让终端走socks5代理
(2017.9.17更新) 方法1: 在终端中直接运行命令 1 export http_proxy=http://proxyAddress:port 这个办法的好处是简单直接,并且影响面很小(只对当前 ...
- node.js 线程调试配置
{ // 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述. // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linki ...
- centos6.6安装Elasticsearch
1. 安装jar8 yum list java-1.8* sudo yum install java-1.8.0-openjdk* -y java --version 2. 安装elasticsear ...
- cobbler自动装机服务简介与配置
cobbler简介 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等. Cobbler可以使用命令行 ...
- <taglib>报错
问题:web.xml中<taglib>报错 2.3版本可以直接卸载<web-app>中 2.4及之后放在<jsp-config>中 <jsp-config&g ...
- 对 JSON 数据进行序列化和反序列化
如何:对 JSON 数据进行序列化和反序列化 2017/03/30 作者 JSON(JavaScript 对象符号)是一种高效的数据编码格式,可用于在客户端浏览器和支持 AJAX 的 Web 服务之间 ...