JS框架_(JQuery.js)网页文字评论弹幕
百度云盘 传送门 密码：3azl
jQuery网页右下角文字评论弹幕效果
<!DOCTYPE html>
<html>
<head>
<title>jQuery网页右下角文字评论弹幕代码</title>
<meta charset="utf-8">
<meta id="scale" content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport"> <script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/index.js"></script> <style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
} p {
position: fixed;
top: 50%;
left: 0;
right: 0;
text-align: center;
transform: translateY(-50%);
font-size: 40px;
font-weight: 900;
color: white;
text-shadow: 0 0 50px black;
text-transform: capitalize;
font-family: 'Roboto','Helvetica','Arial',sans-serif;
letter-spacing: 5px;
} .form-control{
display: inline-block;
width: auto;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
} .btn{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
} .btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
} /*组件主样式*/
.overflow-text{
display: block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
opacity:0;
clear: both;
padding:3px 10px;
border-radius: 10px;
box-sizing: border-box;
max-width: 100%;
color:#fff;
animation:colorchange 3s infinite alternate;
-webkit-animation:colorchange 3s infinite alternate; /*Safari and Chrome*/
}
@keyframes colorchange{
0%{
color:red;
}
50%{
color:green;
}
100%{
color:#6993f9;
}
} </style> </head>
<body> <p>Gary</p> <center><br><br><br>
<button id="stop" class="btn btn-primary">停止</button>
<button id="open" class="btn btn-primary">弹</button>
<input type="text" class="form-control" name="" id="barrage_content" placeholder="添加弹幕内容"><button class="btn btn-primary" id="submit_barraget">发送</button>
</center> <script type="text/javascript"> // 数据初始化
var Obj = $('body').barrage({
data : data, //数据列表
row : 5, //显示行数
time : 1000, //间隔时间
gap : 20, //每一个的间隙
position : 'fixed', //绝对定位
direction : 'bottom right', //方向
ismoseoverclose : true, //悬浮是否停止
})
Obj.start(); //添加评论
$("#submit_barraget").click(function(){ var val = $("#barrage_content").val();
//此格式与dataa.js的数据格式必须一致
var addVal = {
href : '',
text : val
}
//添加进数组
Obj.data.unshift(addVal);
alert('评论成功'); }) $("#open").click(function(){
Obj.start();
})
$("#stop").click(function(){
Obj.close();
})
</script> </body>
</html>
index.html
$.fn.barrage = function(opt){
var _self = $(this);
var opts = { //默认参数
data : [], //数据列表
row : 5, //显示行数
time : 2000, //间隔时间
gap : 20, //每一个的间隙
position : 'fixed', //绝对定位
direction : 'bottom right', //方向
ismoseoverclose : true, //悬浮是否停止
}
var settings = $.extend({},opts,opt); //合并参数
var M = {},Obj = {};
Obj.data = settings.data;
M.vertical = settings.direction.split(/\s+/)[0]; //纵向
M.horizontal = settings.direction.split(/\s+/)[1]; //横向
M.bgColors = ['#edbccc','#edbce7','#c092e4','#9b92e4','#92bae4','#92d9e4','#92e4bc','#a9e492','#d9e492','#e4c892']; //随机背景色数组
Obj.arrEle = []; //预计存储dom集合数组
M.barrageBox = $('<div id="barrage" style="z-index:999;max-width:100%;position:'+settings.position+';'+M.vertical+':0;'+M.horizontal+':0;"></div>'); //存所有弹幕的盒子
M.timer = null;
var createView = function(){
var randomIndex = Math.floor(Math.random() * M.bgColors.length);
var ele = $('<a class="overflow-text" target="_blank" style="opacity:0;text-align:'+settings.direction.split(/\s+/)[1]+';float:'+settings.direction.split(/\s+/)[1]+';background-color:'+M.bgColors[randomIndex]+'"; href="'+(Obj.data[0].href ? Obj.data[0].href : "javascript:;")+'">'+Obj.data[0].text+'</a>');
var str = Obj.data.shift();
if(M.vertical == 'top'){
ele.animate({
'opacity' : 1,
'margin-top' : settings.gap,
},1000)
M.barrageBox.prepend(ele);
}else{
ele.animate({
'opacity' : 1,
'margin-bottom' : settings.gap,
},1000)
M.barrageBox.append(ele);
}
Obj.data.push(str);
if(M.barrageBox.children().length > settings.row){
M.barrageBox.children().eq(0).animate({
'opacity' : 0,
},300,function(){
$(this).css({
'margin' : 0,
}).remove();
})
}
}
M.mouseClose = function(){
settings.ismoseoverclose && (function(){
M.barrageBox.mouseover(function(){
clearInterval(M.timer);
M.timer = null;
}).mouseout(function(){
M.timer = setInterval(function(){ //循环
createView();
},settings.time)
})
})()
}
Obj.close = function(){
M.barrageBox.remove();
clearInterval(M.timer);
M.timer = null;
}
Obj.start = function(){
if(M.timer) return;
_self.append(M.barrageBox); //把弹幕盒子放到页面中
createView(); //创建试图并开始动画
M.timer = setInterval(function(){ //循环
createView();
},settings.time)
M.mouseClose();
}
return Obj;
}
index.js
var data = [
{href : 'http://www.baidu.com',text : '百度'},
{href : 'http://www.cnblogs.com/1138720556Gary/',text : 'Cynical丶Gary'},
{href : '',text : '这是弹幕_1'},
{href : '',text : '这是弹幕_2'},
{href : '',text : '这是弹幕_3'}
]
data.js
作者：冯宇 传送门
实现过程：
CSS
弹幕文字动画效果
@keyframes colorchange{
0%{
color:red;
}
50%{
color:green;
}
100%{
color:#6993f9;
}
}
通过 @keyframes 规则，能够创建随着弹幕出现时间改变弹幕颜色动画
0% 是动画的开始时间，100% 动画的结束时间
初始化弹幕
var data = [
{href : 'http://www.baidu.com',text : '百度'},
{href : 'http://www.cnblogs.com/1138720556Gary/',text : 'Cynical丶Gary'},
{href : '',text : '这是弹幕_1'},
{href : '',text : '这是弹幕_2'},
{href : '',text : '这是弹幕_3'}
]
href作为参数链接，新建弹幕默认无链接
弹幕属性
var opts = { //默认参数
data : [], //数据列表
row : 5, //显示行数
time : 2000, //间隔时间
gap : 20, //每一个的间隙
position : 'fixed', //绝对定位
direction : 'bottom right', //方向
ismoseoverclose : true, //悬浮是否停止
}
随机背景色数组
M.bgColors = ['#edbccc','#edbce7','#c092e4','#9b92e4','#92bae4','#92d9e4','#92e4bc','#a9e492','#d9e492','#e4c892'];
弹幕展示效果
var createView = function(){
var randomIndex = Math.floor(Math.random() * M.bgColors.length);
var ele = $('<a class="overflow-text" target="_blank" style="opacity:0;text-align:'+settings.direction.split(/\s+/)[1]+';float:'+settings.direction.split(/\s+/)[1]+';background-color:'+M.bgColors[randomIndex]+'"; href="'+(Obj.data[0].href ? Obj.data[0].href : "javascript:;")+'">'+Obj.data[0].text+'</a>');
var str = Obj.data.shift();
if(M.vertical == 'top'){
ele.animate({
'opacity' : 1,
'margin-top' : settings.gap,
},1000)
M.barrageBox.prepend(ele);
}else{
ele.animate({
'opacity' : 1,
'margin-bottom' : settings.gap,
},1000)
M.barrageBox.append(ele);
}
Obj.data.push(str);
if(M.barrageBox.children().length > settings.row){
M.barrageBox.children().eq(0).animate({
'opacity' : 0,
},300,function(){
$(this).css({
'margin' : 0,
}).remove();
})
}
}
prepend()：在被选元素的开头（仍位于内部）插入指定内容
animate() ：执行 CSS 属性集的自定义动画
shift() 方法：用于把数组的第一个元素从其中删除，并返回第一个元素的值
当需要暂时的弹幕数量>最大展示数量(这里是5)，那么全部展现出来，否则通过opacity()方法，改变弹幕透明度
语法
鼠标放置弹幕上，弹幕停止滚动
M.mouseClose = function(){
settings.ismoseoverclose && (function(){
M.barrageBox.mouseover(function(){
clearInterval(M.timer);
M.timer = null;
}).mouseout(function(){
M.timer = setInterval(function(){ //循环
createView();
},settings.time)
})
})()
}
通过.ismoseoverclose判断鼠标是否悬停在弹幕上
M.timer = null使弹幕停止滚动
关闭弹幕
Obj.close = function(){
M.barrageBox.remove();
clearInterval(M.timer);
M.timer = null;
}
开启弹幕
Obj.start = function(){
if(M.timer) return;
_self.append(M.barrageBox); //把弹幕盒子放到页面中
createView(); //创建试图并开始动画
M.timer = setInterval(function(){ //循环
createView();
},settings.time)
M.mouseClose();
}
DOM
<script type="text/javascript"> // 数据初始化
var Obj = $('body').barrage({
data : data, //数据列表
row : 5, //显示行数
time : 1000, //间隔时间
gap : 20, //每一个的间隙
position : 'fixed', //绝对定位
direction : 'bottom right', //方向
ismoseoverclose : true, //悬浮是否停止
})
Obj.start(); //添加评论
$("#submit_barraget").click(function(){ var val = $("#barrage_content").val();
//此格式与dataa.js的数据格式必须一致
var addVal = {
href : '',
text : val
}
//添加进数组
Obj.data.unshift(addVal);
alert('评论成功'); }) $("#open").click(function(){
Obj.start();
})
$("#stop").click(function(){
Obj.close();
})
</script>
JS框架_(JQuery.js)网页文字评论弹幕的更多相关文章
- JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
- JS框架_(JQuery.js)圆形多选菜单选项
百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
- JS框架_(JQuery.js)上传进度条
百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- JS框架_(JQuery.js)模拟刮奖
百度云盘:传送门 密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...
- JS框架_(JQuery.js)文章全屏动画切换
百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
- JS框架_(JQuery.js)高德地图api
百度云盘 传送门 密码 :ko30 高德地图api效果 <!doctype html> <html> <head> <meta charset="u ...
- JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
随机推荐
- Codeforces 1229B. Kamil and Making a Stream
传送门 注意到只要考虑祖先和后代之间的贡献 发现对于一个节点,他和所有祖先最多产生 $log$ 个不同的 $gcd$ 所以每个节点开一个 $vector$ 维护祖先到自己所有不同的 $gcd$ 和这个 ...
- redis 学习（15）-- GEO
GEO GEO 简介 Redis 3.2添加新特性 功能:存储经纬度.计算两地距离.范围计算等 基于ZSet实现 删除操作使用 zrem key member GEO 相关命令 1.geoadd ke ...
- windows下搭建spark+python 开发环境
有时候我们会在windows 下开发spark程序,测试程序运行情况,再部署到真实服务器中运行. 那么本文介绍如何在windows 环境中搭建简单的基于hadoop 的spark 环境. 我的wind ...
- php和java语法区别
Java和PHP的基本语法基本相同,其实大部分的语言的基本语法也都相同,但是他们还是有一些细微的区别: 1.PHP是一种脚本语言,代码在服务器上执行,而结果以纯文本返回浏览器. 2.PHP能够运行在各 ...
- mysql-8.0.17-winx64 部署
1.官网下载mysql-8.0.17-winx64,选择Zip文件格式下载 2.解压到目标路径,我这里是E盘根目录,即E:\mysql8 3.根目录下创建my.ini,内容如下: [mysqld]#端 ...
- Abp添加新的Api(不扩展底层方法)
定义新的实体类:FileManage;继承 FullAuditedEntity<Guid> 在XX.Application 中定义IXXservice及实现XXservice public ...
- Linux小知识：rm -rf/*会将系统全部删除吗
Linux小知识:rm -rf/*会将系统全部删除吗 本文是学习笔记,视频地址为:https://www.bilibili.com/video/av62839850 执行上面的命令并不会删除所有内容( ...
- nginx redirect ignore port 两层nginx跳转忽略了端口
问题: 两层nginx做代理,第一层:nginx:将9087->代理到80端口,第二层:将80端口->流量打到我们的代码上,结果在代码中拿到的链接不带9087端口,则代码中发生跳转的时候, ...
- OpenCV 在VS2013的安装
现在就介绍下如何在VS2013上配置openCV3.0的方法 如果是32位操作系统的:https://www.cnblogs.com/ssjie/p/4943439.html 1.下载openCV3. ...
- WinRAR去广告
许多解压软件的广告看着令人头疼,今天我就给大家分享一个把WinRAR软件的广告去掉的方法. 环境: win rar restorator 2007(腾讯软件直接下载即可) 步骤: 首先 ...