文档章节

案例:弹幕表白技术

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

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

  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>



© 著作权归作者所有

共有 人打赏支持
上一篇: css定位
下一篇: transition过渡属性
lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
只需四个步骤几行代码,即可快速实现直播弹幕功能

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

Yunba
2016/10/18
85
2
从硬件开始实践物联网-物联网弹幕器的灵感!

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

零妖
06/03
0
0
物联网全栈教程-从云端到设备(二)

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

jixin_lee
05/09
0
0
OSChina 技术周刊第六期——Node.js 包教不包会

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

OSC编辑部
2014/10/26
4.6K
7
淘宝里B站的弹幕是怎么实现的

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

涛宝1990
2014/12/02
931
1

没有更多内容

加载失败,请刷新页面

加载更多

Docker搭建代码质量检测平台-SonarQube(中文版)

Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量,可以从七个维度检测代码质量。通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言...

Jacktanger
16分钟前
0
0
Windows / Linux / MacOS 设置代理上网的方法汇总

本文汇总了 Windows / Linux / MacOS 设置代理上网的各种方法,总结如下: 1、设置系统代理(Windows、Linux、MacOS) 2、设置代理插件(Chrome、Chromium、Firefox、Opera、QQ等浏览器) 3、...

sunboy2050
昨天
2
0
自定义 Maven 的 repositories

有时,应用中需要一些比较新的依赖,而这些依赖并没有正式发布,还是处于milestone或者是snapshot阶段,并不能从中央仓库或者镜像站上下载到。此时,就需要 自定义Maven的<repositories>。 ...

waylau
昨天
2
0
徒手写一个es6代码库

mkdir democd demonpm initnpm install -g babelnpm install -g babel-clinpm install --save-dev babel-preset-es2015-node5 在项目目录创建两个文件夹 functional-playground ......

lilugirl
昨天
3
0
linux定位应用问题的一些常用命令,特别针对内存和线程分析的dump命令

1.jps找出进程号,找到对应的进程号后面才好继续操作 2.linux查看进程详细信息 ps -ef | grep 进程ID 3. dump内存信息 Jmap -dump:format=b,file=YYMMddhhmm.dump pid 4.top查看cpu占用信息 ...

noob_chr
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部