jQuery实现评论弹幕、弹幕漂浮、滚动代码
1、html代码和jquery代码:
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title>document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0, minimun-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="js/auto_rem.js"></script>
<link rel="stylesheet" href="css/style.css" />
</head> <body>
<header class="fixed top-nav">
<a class="back"></a>
<span class="title">公屏</span>
<a class="home"></a>
</header>
<div class="gp-body">
<div class="main-box">
<ul class="all-list">
</ul>
</div>
<div class="fixed send-ms flex">
<div class="ipt s_txt flex1" contenteditable="true"></div>
<span class="btn s_btn">发送</span>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//发表评论
$.getJSON('./js/test.json', function(result) {
actFn($('.all-list'), result)
}) function actFn(tar, data) {
var data = data;
startTranslate();
appendNewItem(); function startTranslate() {
var key = 0;
var leng = data.length;
var time = setInterval(function() {
if (key >= leng) {
clearInterval(time);
return;
};
var _html = itemHtml(data[key].img_src, data[key].grade, data[key].words)
key++;
tar.append(_html);
translateFn();
}, 400);
} function appendNewItem() {
$(".s_btn").click(function() {
var text = $(".s_txt").html();
if (text == '') return;
var _html = itemHtml('./img/heads.png', '最强王者', text)
tar.prepend(_html);
$(".s_txt").html('');
translateFn();
});
} function itemHtml(img, grade, words) {
var _html = "<li class='item'>" +
"<span class='img-box'>" +
"<img src='" + img + "' alt=''>" +
"</span>" +
"<p class='para'>" +
"<em class='grade'>" + grade + "</em>" +
"<span class='words'>" + words + "</span>" +
"</p>" +
"</li>";
return _html;
} var initTop = 20;
var _top = initTop; function translateFn() {
tar.find("li[class!='had']").show().each(function(item, key) {
if ($(this).hasClass('had')) return;
var that = this;
var twidth = $(this).width();
var _left = $(window).width() + twidth;
var rd = Math.random() * 100;
var rdColor = getRandomColor();
var _height = $(window).height();
var time = 20000;
if (_top > _height - 150) {
if (initTop == 20) {
_top = initTop = 60;
} else {
_top = initTop = 20;
}
}
$(this).find('.grade').css({
color: rdColor
})
$(this).css({
top: _top,
right: "-" + twidth + "px"
});
$(this).css({
transform: "translateX(-" + (_left + rd + 200) + "px)"
}).addClass('had');
_top = _top + 80;
});
} //随机获取颜色值
function getRandomColor() {
return '#' + (function(h) {
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
}
}
}); //初始化弹幕
</script> </html>
2、scss代码:
.gp-body {
@extend .main;
width: 100%;
height: 100%;
.main-box {
background: url("../img/gp-bg.jpg") no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%;
overflow: hidden;
overflow-y: scroll;
.all-list {
position: relative;
}
.item {
display: inline-block;
position: absolute;
top:;
right: -100%;
display: none;
transition: transform 12s ease-in-out; //css设置移动的时间及表现
;
.para {
color: white;
font-size: 14px;
line-height: 37px;
display: inline-block;
overflow: hidden;
border-radius: 20px;
background: rgba(0, 0, 0, 0.6);
padding: 0 10px;
max-width: 400px;
white-space: nowrap;
text-overflow: ellipsis;
.grade {
margin-right: 3px;
}
}
.img-box {
float: left;
img {
width: 35px;
height: 35px;
border-radius: 100%;
margin-right: 5px;
}
}
}
}
}
评论弹幕的主要思想是重看不到的屏幕位置移动到屏幕看到的位置，最后消失，所以需要移动，这里采用的是css3 的translate 方法，可以实现目标的移动而在移动端不卡顿。
至于每条屏幕的飘移过程中之间的位置关系需要良好的设置，比如间隔时间插入每条评论，这样就会在垂直位置上错开，还有就是top位置的关系上的调节等，比如奇数排设置top20，偶数排设置60，这样又可以错开水平方面的每条评论的位置。如下的错开:
以下是最终效果图:
以下是demo数据:
[{
"img_src": "./img/heads.png",
"grade": "最强王者",
"words": "灯笼裤飞机失控打笼裤飞机失控打笼裤飞机失控打笼裤飞机失控打笼裤飞机失控打笼裤飞机失控打飞机"
}, {
"img_src": "./img/heads.png",
"grade": "最强王者",
"words": "灯笼裤飞机失控飞机失控飞机失控打飞机"
}, {
"img_src": "./img/heads.png",
"grade": "最强王者",
"words": "灯笼裤飞机失控打飞机"
}, {
"img_src": "./img/heads.png",
"grade": "最强王者",
"words": "灯笼裤飞机失控飞机失控飞机失控打飞机"
}, {
"img_src": "./img/heads.png",
"grade": "最强王者",
"words": "灯笼裤飞机失控飞机失控飞机失控打飞机"
}, {
"img_src": "./img/heads.png",
"grade": "荣耀黄金",
"words": "灯笼裤飞机失控打飞机"
}, {
"img_src": "./img/heads.png",
"grade": "最强王者",
"words": "灯笼裤飞机失控打飞机last"
}]
jQuery实现评论弹幕、弹幕漂浮、滚动代码的更多相关文章
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery星级评论表单美化代码
最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...
- JQuery漂浮广告代码
<!doctype html><html><head><meta charset="utf-8"><title>jque ...
- jQuery防京东浮动网站楼层导航代码
jQuery防京东浮动网站楼层导航代码 <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据
jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据 数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页. 当滚动垂直滚动条时,数据网格(datagrid ...
- JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...
- jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...
- Web jquery表格组件 JQGrid 的使用 - 全部代码
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- HTML滚动字幕代码参数详解及Js间隔滚动代码
html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
随机推荐
- PowerDesigner学习 ---- 系列文章
一.PowerDesigner概述(系统分析与建模) 二.项目和框架矩阵 三.企业架构模型 四.业务处理模型 五.概念数据模型(CDM生成LDM,PDM和OOM) 六.物理数据模型(PDM逆向工程) ...
- mvn+spring+webapp模板
idea新建项目,选择maven-archetype-webapp 在main目录下创建java resource 文件夹,赋予特殊文件夹 pom.xml 添加 <!--Spring框架核心库 ...
- springMVC--4种映射处理器handlerMapping
根据controller的name名称来映射寻找controller:BeanNameUrlHandlerMapping (默认) 1.1开启该映射:默认是开启的 <bean class=&q ...
- Reactor/Proactor的比较 (ZZ)
一般情况下,I/O 复用机制需要事件分享器(event demultiplexor [1.3]). 事件分享器的作用,即将那些读写事件源分发给各读写事件的处理者,就像送快递的在楼下喊: 谁的什么东西送 ...
- PySpark理解wordcount.py
在本文中, 我们借由深入剖析wordcount.py, 来揭开Spark内部各种概念的面纱.我们再次回顾wordcount.py代码来回答如下问题 对于大多数语言的Hello Word示例,都有mai ...
- django默认后台使用
1.初始化数据python manage.py migrate 2.创建超级用户python manage.py createsuperuser 然后按照提示输入就可以了 3.admin管理页面找不到 ...
- 比较字典推导式/dict()/通过键来构造的字典的速率 笔记
# 下面结果执行一次不容易出差距,所以都执行100000次 import time dict1 = {'a':1, 'b':2, 'c':3, 'd':4} # 第一种:字典推导式 start_tim ...
- 深入理解ASP.NET MVC（3）
系列目录 URL是如何通过路由表生成的(outbound) 通常我们被推荐在view设计时使用Html.ActionLink(…)产生链接,这样做的优势就是,url可以根据路由表生成.路由机制的另一个 ...
- RC4被JDK8默认禁用导致腾讯QQ邮箱无法访问
7月29日开始,腾讯修改了邮箱的加密方式,导致我们线上的所有的腾讯代收.代发邮件的功能全部失效.解决方法在最后,如果需要可直接跳转至解决方法一节 问题出现 7月29日开始,线上的所有的腾讯代收.代发邮 ...
- python slave status 2
#!/usr/bin/env python import MySQLdbimport contextlib @contextlib.contextmanagerdef mysql(Host,Port, ...