文档章节

案例:弹幕表白技术

lotozhou
 lotozhou
发布于 2015/11/28 16:25
字数 613
阅读 472
收藏 8
点赞 0
评论 0

今天分享一个很炫酷的弹幕表白技术案例,主要功能是通过点击上方要白的弹幕表白图像,下面的输入框出现,并有音乐播放,我们通过在输入框里面输入内容能够在公屏上显示出来,下面我们一步一步来实现这个看似神秘的技术。

  1. 实现让弹幕表白图片出现

    通过img标签并对它设计样式,动画处理,让图片动起来

    <img src="images/xx.png" class="gb"></img>

    样式:

img.gb{ position:fixed; left:45%; top:0px; -webkit-animation:bd 5s ease-in-out infinite;}

@-webkit-keyframes bd{

0%{-webkit-transform:rotate(30deg); -webkit-transform-origin:center top;}

50%{-webkit-transform:rotate(-30deg); -webkit-transform-origin:center top;}

100%{-webkit-transform:rotate(30deg); -webkit-transform-origin:center top;}

}

    通过css3样式就可以实现让弹幕告白图片动起来

2. 添加背景图片和输入对话框

    <div class="gray">

<div class="con">

<span class="col">颜色 <font></font></span>

<p class="txt" contenteditable="true"></p>

<span class="button">清空再写</span>

                </div>

    </div>

    把背景设置为半透明的黑色,美化输入框

    div.gray{width:100%; height:100%; background:rgba(0,0,0,0.5); position:fixed; left:0px; top:0px; display:none;}

    div.con{width:560px; height:30px; position:fixed; left:30%; bottom:10%;}

    div.con span.col{width:80px; height:30px; background:#f3f3f3; display:block; float:left; border-radius:3px 0px 0px                                3px; font-size:12px; line-height:30px; text-indent:10px;}

    div.con p.txt{height:30px; width:400px; background:#fff; float:left;}

    div.con span.button{width:80px; height:30px; background:#ff0066; display:block; float:left; font-size:12px;                                                 color:#ffffff; text-align:center; line-height:30px; border-radius:0px 3px 3px 0px;}

    div.con span.col font{width:10px; height:10px; display:block; background:red; position:absolute; left:40px;                                                 top:9px; border:1px solid #000000;}

    通过css样式让输入框看起来美观一点

3.  创建颜色选择器,并结合js让选择字体颜色以及弹幕出现在公屏上等功能实现

    首先创建无序列表:

    <ul>

    <li data-color="#ffff33">颜色 <font style="background-color:#ffff33"></font></li>

    <li data-color="#0000ff">颜色 <font style="background-color:#0000ff"></font></li>

    <li data-color="#ff0000" class="xz">颜色 <font style="background-color:#ff0000"></font></li>

    <li data-color="#ffffff">颜色 <font style="background-color:#ffffff"></font></li>

            <li data-color="#00ff00">颜色 <font style="background-color:#00ff00"></font></li>

    </ul>

    利用js让选择器能够选择颜色,让字显示在公屏上面

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$("img.gb").click(function(){

$(".gray").show();

$("#music").get(0).play();

});

$("span.col").click(function(){

$(".con ul").toggle("slow");

});

$(".con ul li").click(function(){

var col=$(this).data("color");

$("span.col font").css("background-color",col);

$(this).addClass("xz").siblings().removeClass("xz");

$(".con ul").toggle("slow");

});

var arr=[];

$("p.txt").keyup(function(e){

var col=$(".con ul li.xz").data("color");

var txt="<span style='color:"+col+"'>"+$(this).text()+"</span>";

$(".Text").html(arr.join("").toString()+txt);


if(e.keyCode==13){

$(this).empty();

arr.push("<p>"+txt+"</p>");

var html="";

for(var i=0;i<arr.length;i++){

html+=arr[i];

}

$(".Text").html(html);

}

});

</script>



© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
OSChina 技术周刊第六期——Node.js 包教不包会

每周技术抢先看,总有你想要的! 移动开发 【博客】Xamarin iOS开发实战第1章使用C#编写第一个iOS应用 【博客】Timer计时任务存在的问题 前端开发 【软件】SAPUI5 —— 来自 SAP 的企业 Java...

OSC编辑部 ⋅ 2014/10/26 ⋅ 7

只需四个步骤几行代码,即可快速实现直播弹幕功能

在视频直播中,互动是不可缺少、不容小觑的内容,主要包括发送弹幕、打赏、点赞等。想要快速实现这些功能,需要进行怎样的操作呢? 其实,实现直播弹幕功能只需“四个步骤”和“几行代码”!...

Yunba ⋅ 2016/10/18 ⋅ 2

从硬件开始实践物联网-物联网弹幕器的灵感!

物联网全栈教程-从云端到设备(二) 一 我不信你没有看过爱奇艺或者优酷这些视频,看到这篇帖子的人,99.99%都看过。那么视频上发送弹幕你一定也知道了,玩没玩过我不知道但是你一定见过。有...

零妖 ⋅ 06/03 ⋅ 0

Android弹幕功能实现,模仿斗鱼直播的弹幕效果

转载请注明出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即可关注,每天都有文章更新。 大家...

sinyu890807 ⋅ 2016/10/18 ⋅ 0

物联网全栈教程-从云端到设备(二)

一 我不信你没有看过爱奇艺或者优酷这些视频,看到这篇帖子的人,99.99%都看过。那么视频上发送弹幕你一定也知道了,玩没玩过我不知道但是你一定见过。有些朋友在看直播的时候更是喜欢评论个...

jixin_lee ⋅ 05/09 ⋅ 0

淘宝里B站的弹幕是怎么实现的

昨天逛淘宝看到了淘宝网页上出现了弹幕,有人不停地刷弹幕 ,我自己也试了,感觉还不错,我想知道网页弹幕是怎么实现的,用到了什么技术,还请高人指点

涛宝1990 ⋅ 2014/12/02 ⋅ 1

弹幕有硬伤,转变主流成妄想

  弹幕网站,顾名思义便是像炮弹一样的评论(吐槽)充斥屏幕。这个领域的鼻祖是成立于2006年的日本网站NICONICO。2006年12月12日,“Niconico动画”正式上线。这家以盗链Youtube起家的日本视...

于明 ⋅ 2015/08/21 ⋅ 0

flash弹幕播放器--PAD

PAD(Project! Another Displayer)是一个开源的免费的支持多段缓冲流的flash弹幕播放器,包含基于google app engine的服务器端和基于adobe flex的swf富客户端播放器(副产品包括基于Adobe A...

匿名 ⋅ 2010/03/12 ⋅ 0

Android弹幕实现:基于B站弹幕开源系统(7)QQ、微信聊天气泡样式的弹幕

Android弹幕实现:基于B站弹幕开源系统(7)QQ、微信聊天气泡样式的弹幕 在附录文章得基础上,改进普通文本弹幕,实现一种特殊效果的文本弹幕,像QQ、微信一样的带有气泡背景的弹幕。实现的重...

zhangphil ⋅ 2017/06/08 ⋅ 0

如何利用弹幕,打造出非凡的观看体验

作者:且行且看 全文共 3832 字 7 图,阅读需要 8 分钟 ———— / BEGIN / ———— 弹幕最早起源于niconico动画,后来经由AcFun引入国内,现在已经被不少视频网站所采用。其伪即时互动的特...

k7jz78gejj ⋅ 04/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 39分钟前 ⋅ 0

彻底删除Microsoft Office的方法

参照此链接彻底删除Office https://support.office.com/zh-cn/article/%e4%bb%8e-pc-%e5%8d%b8%e8%bd%bd-office-9dd49b83-264a-477a-8fcc-2fdf5dbf61d8?ui=zh-CN&rs=zh-CN&ad=CN......

Kampfer ⋅ 54分钟前 ⋅ 0

大盘与个股之间关系

大盘走多:积极出手 顺势加码 大盘走空: 少量出手 退场观望 大盘做头:逆势减码 少量操作 大盘做底 : 小量建仓 小量试单

guozenhua ⋅ 55分钟前 ⋅ 0

Day16 LVM(逻辑卷管理)与磁盘故障小案例

lvm详解 简述 LVM的产生是因为传统的分区一旦分区好后就无法在线扩充空间,也存在一些工具能实现在线扩充空间但是还是会面临数据损坏的风险;传统的分区当分区空间不足时,一般的解决办法是再...

杉下 ⋅ 今天 ⋅ 0

rsync实现多台linux服务器的文件同步

一、首先安装rsync,怎样安装都行,rpm,yum,还是你用源码安装都可以。因为我用的是阿里云的ESC,yum install rsync就ok了。 二、配置rsync服务 1.先建立个同步数据的帐号 123 groupadd r...

在下头真的很硬 ⋅ 今天 ⋅ 0

前端基础(三):函数

字数:1685 阅读时间:5分钟 函数定义 在最新的ES规范中,声明函数有4中方法: -函数声明 -函数表达式 -构造函数Function -生成器函数 1.函数声明 语法: function name([param[, param2 [....

老司机带你撸代码 ⋅ 今天 ⋅ 0

Java虚拟机的Heap监狱

在Java虚拟机中,我是一个位高权重的大管家,他们都很怕我,尤其是那些Java 对象,我把他们圈到一个叫做Heap的“监狱”里,严格管理,生杀大权尽在掌握。 中国人把Stack翻译成“栈”,把Hea...

java高级架构牛人 ⋅ 今天 ⋅ 0

Spring MVC基本概念

只写Controller

颖伙虫 ⋅ 今天 ⋅ 0

微软重金收购GitHub的背后逻辑原来是这样的

全球最大的开发者社区GitHub网站花落谁家的问题已经敲定,微软最终以75亿美元迎娶了这位在外界看来无比“神秘”的小家碧玉。尽管此事已过去一些时日,但整个开发者世界,包括全球各地的开源社...

linux-tao ⋅ 今天 ⋅ 0

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部