文档章节

案例:弹幕表白技术

lotozhou
 lotozhou
发布于 2015/11/28 16:25
字数 613
阅读 485
收藏 8

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

  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
苏州
程序员
只需四个步骤几行代码,即可快速实现直播弹幕功能

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

Yunba
2016/10/18
85
2
OSChina 技术周刊第六期——Node.js 包教不包会

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

OSC编辑部
2014/10/26
4.3K
7
从硬件开始实践物联网-物联网弹幕器的灵感!

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

零妖
06/03
0
0
Android弹幕功能实现,模仿斗鱼直播的弹幕效果

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

sinyu890807
2016/10/18
0
0
物联网全栈教程-从云端到设备(二)

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

jixin_lee
05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Shell编程(expect同步文件、指定host和同步文件、构建文件分发系统、批量执行命令)

expect脚本同步文件 需求:自动同步文件 实验准备: A机器:192.168.248.130 B机器:192.168.248.129 实现: 1.A机器编写4.expect脚本文件,内容如下所示: #!/usr/bin/expectset passwd "...

蛋黄_Yolks
23分钟前
2
0
ppwjs之bootstrap颜色:背景颜色

<!DOCTYPT html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>ppwjs欢迎您</title><link rel="icon" href="/favicon.ico" ......

ppwjs
24分钟前
1
0
Ubuntu与 Fedora之对比

大家好。今天我将重点介绍两个流行的Linux发行版之间的一些特性和差异; Ubuntu 18.04和Fedora 28。它们都有自己的包管理; Ubuntu使用DEB,而Fedora使用RPM,但它们都具有相同的桌面环境(GNO...

linuxprobe16
28分钟前
2
0
线性代数入门

线性代数的概念对于理解机器学习背后的原理非常重要,尤其是在深度学习领域中。它可以帮助我们更好地理解算法内部到底是怎么运行的,借此,我们就能够更好的做出决策。所以,如果你真的希望了...

牛奋Debug
昨天
3
0
开发5分钟,调试2小时 - 该如何debug?

几年来我在答疑群、论坛、公众号、知乎回答的各种问题,没有一万也有八千。其中有三分之二以上都是在帮人看报错,帮人 debug(调试代码)。 可以说,会不会 debug,有没有 debug 的意识,懂不...

crossin
昨天
4
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部