文章
文章用户商铺文档快讯星球网址导航供求信息

学习网页实现评论弹幕气泡（附7b2优化成果）

前言

弹幕（适用于评论，留言，打赏等），当然这些都是基于jQuery的！

默认数据格式为

    var data = [
      {href : 'http://favnow.com',text : '我的博客http://www.favnow.com'},
      {href : 'http://www.baidu.com',text : '百度'},
      {href : 'http://www.imooc.com',text : '慕课网'},
      {href : 'http://www.jq22.com',text : 'jquery插件网'},
      {href : '',text : '1080迷'},
      {href : '',text : '鲨鱼TV'}
    ]

data为数据，数据格式可调换，更改数据格式时，记得去改源码中的36行

数据初始化

    var Obj = $('body').barrage({
            data : data, //数据列表
	row : 5,   //显示行数
	time : 2500, //间隔时间
	gap : 20,    //每一个的间隙
	position : 'fixed', //绝对定位
	direction : 'bottom right', //方向
	ismoseoverclose : true, //悬浮是否停止
	height : 30, //设置单个div的高度
    })

开始弹幕方法

    Obj.start();

添加弹幕方法

   //添加评论
  $("#submit_barraget").click(function(){

    var val = $("#barrage_content").val();
    //此格式与data.js的数据格式必须一致
    var addVal = {
      href : '',
      text : val
    }
    //添加进数组
    Obj.data.unshift(addVal);
    alert('评论成功');

  })

关闭弹幕方法

  Obj.close();

源代码

HTML及CSS代码，data.js为演示数据文件，具体可以参考上方。index.js在下方

<!DOCTYPE html>
<html>
<head>
	<title>弹幕</title>
	<meta charset="utf-8">
	<meta id="scale" content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
	<script type="text/javascript" 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;
		}

		.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:0 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>
	<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>
</body>
<script type="text/javascript">

	// 数据初始化
	var Obj = $('body').barrage({
		data : data, //数据列表
		row : 5,   //显示行数
		time : 2500, //间隔时间
		gap : 20,    //每一个的间隙
		position : 'fixed', //绝对定位
		direction : 'bottom right', //方向
		ismoseoverclose : true, //悬浮是否停止
		height : 30, //设置单个div的高度
	})
	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>
</html>

JS文件 js/index.js 

	$.fn.barrage = function (opt) {

	    var _self = $(this);

	    var opts = { //默认参数
	        data: [], //数据列表
	        row: 5, //显示行数
	        time: 2000, //间隔时间
	        gap: 20, //每一个的间隙
	        position: 'fixed', //绝对定位
	        direction: 'bottom right', //方向
	        ismoseoverclose: true, //悬浮是否停止
	        height: 30,
	    }

	    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="height:0;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,
	                'height': settings.height,
	                'line-height': settings.height + 'px',
	            }, 1000)
	            M.barrageBox.prepend(ele);
	        } else {
	            ele.animate({
	                'opacity': 1,
	                'margin-bottom': settings.gap,
	                'height': settings.height,
	                'line-height': settings.height + 'px'
	            }, 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;
	}

以下是7b2的成果代码：

虽说是7b2评论气泡，其实就是用了7b2的api，其他主题照样使用；

CSS代码

* {
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
}
.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: 0 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;
	}
}
#Danmu {
	height: 275px;
	overflow: hidden;
	position: fixed;
	z-index: 0;
	max-width: 100%;
	right: 50px;
	bottom: 30px;
}
.overflow-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	padding: 3px 10px;
	border-radius: 10px;
	box-sizing: border-box;
	max-width: 100%;
	color: #fff!important;
	animation: colorchange 3s infinite alternate;
	-webkit-animation: colorchange 3s infinite alternate;
}
#Danmu li {
	display: flex;
	opacity: 0;
	border-radius: 20px;
	color: #fff;
	padding: 5px 10px 5px 10px;
	clear: both;
	font-size: 13px;
	height: 30px;
	float: right;
	line-height: 20px;
}
#Danmu li i {
	padding-left: 3px;
	padding-right: 3px;
}
#Danmu .info_zianv {
	text-decoration: underline;
	font-weight: 600;
	color: #fff;
}
#Danmu .info_zianv:hover {
	color: #fff!important;
}
#Danmu li a:first-child {
	margin-right: 6px;
	width: 20px;
}
#Danmu li a:last-child,#Danmu li a:last-child font {
	color: #fff !important;
}
#Danmu li a:last-child n {
	text-decoration: underline;
	margin: 0 5px;
}
#Danmu li img {
	width: 20px;
	height: 20px;
	border-radius: 100%;
	vertical-align: inherit;
	margin-right: 6px;
}
@keyframes colorchange {
	0% {
		color: red;
	}
	50% {
		color: green;
	}
	100% {
		color: #6993f9;
	}
}
@media (max-width: 780px) {
	#Danmu {
		right: 0;
		bottom: 5px;
	}
}

JS代码

$.fn.barrage = function(opt) {
	var _self = $(this);
	var opts = { //默认参数
		data: [], //数据列表
		row: 5, //显示行数
		time: 2500, //间隔时间
		gap: 15, //每一个的间隙
		direction: 'bottom right', //方向
		ismoseoverclose: true, //悬浮是否停止
	}
	var settings = $.extend({}, opts, opt); //合并参数
	var M = {},
		Obj = {};
	Obj.data = settings.data.data;
	M.vertical = settings.direction.split(/\s+/)[0]; //纵向
	M.horizontal = settings.direction.split(/\s+/)[1]; //横向
	M.bgColors = ['#f79a3e', '#e66760', '#5382af', ' #aea79f', '#37b8af', '#008b5d', ' #f0b849', '#499df3',
		' #5f6c72', ' #8c88cd'
	]; //随机背景色数组
	Obj.arrEle = []; //预计存储dom集合数组
	M.barrageBox = $('<div id="Danmu""></div>'); //存所有弹幕的盒子
	M.timer = null;
	var createView = function() {
		var randomIndex = Math.floor(Math.random() * M.bgColors.length);
		var ele = $('<li class="overflow-text" style="opacity:0;text-align:' + settings.direction.split(/\s+/)[
				1] + ';float:' + settings.direction.split(/\s+/)[1] + ';background-color:' + M.bgColors[
				randomIndex] + '"; ><a class="img" target="_blank" href="' + (Obj.data[0].user.link ? Obj
				.data[0].user.link : "javascript:;") + '"><img src="' + Obj.data[0].user.avatar +
			'"width="40" height="40"></a>' + Obj.data[0].content + '</li>');
		var str = Obj.data.shift();
		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;
}
$.ajax({
	type: "POST",
	data: {
	},
	url: '', //api地址
	success: function(data) {
		var Obj = $('body').barrage({
			data: data,
			//数据
			row: 6,
			//显示行数
			time: 2500,
			//时间
			gap: 15,
			//间隙
			ismoseoverclose: true,
			//悬浮是否停止
		})
		if ($('#Danmu').length == 0) {
			Obj.start();
		}
	}
});

如果主题没有引入jquery.min.js，需要自己引入

在页脚文件引入css和js：

<link rel="stylesheet" href="/wp-content/themes/css.css">
<script type="text/javascript" src="/wp-content/themes/js.js"></script>

给TA打赏
共{{data.count}}人
人已打赏
技术笔记

记录几个随机图片api

2021-12-22 15:05:10

Typecho技术笔记

Typecho最新热门热评文章调用api

2022-1-3 18:34:58

声明 本站文章上的代码及教程皆来源于NOW世界(favnow.com)，仅供学习交流，切勿用于非法用途。转载请备注来源！
如果您对此有任何有建树的想法都可以请您发送邮件至 cople@139.com 或点击右侧 私信：鲨鱼，我们将尽快处理！
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

返回顶部