利用css和jquery制成弹幕
2024-09-06 02:08:16
1.首先上图看下效果
2.废话不多说，直接上代码
1>html代码
<div class="barrage">
<div class="screen">
<div class="content">
<!--内容在这里显示-->
</div>
</div>
<!--发送对话框-->
<div class="send">
<input type="text" class="s_text" placeholder="使用回车可以快速发送弹幕"/>
<input type="button" class="s_btn" value="发送" />
<!--关闭弹幕功能-->
<span class="barrage_close">关闭弹幕</span>
</div>
</div>
2>css部分
*{
padding: 0;
margin: 0;
}
input{
outline: none;
}
.barrage .screen {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
background: url(../img/1.jpg);
background-size: cover;
}
.barrage .screen .content {
position: relative;
width: 100%;
height: 100%;
background: #000;
opacity:0.5;
/* filter: alpha(opacity=100); *//***针对ie8以上或者更早的浏览器****/
background-color: transparent;
z-index: 1;
}
.barrage {
width: 100%;
height: 100%;
}
.barrage .screen .content div {
position: absolute;
font-size: 20px;
font-weight: bold;
white-space: nowrap;
line-height: 40px;
z-index: 40;
}
.barrage .send {
z-index: 1;
width: 100%;
height: 55px;
line-height: 55px;
background: #000;
position: absolute;
bottom: 0px;
text-align: center;
}
.barrage .send .s_text {
width: 600px;
height: 40px;
line-height: 40px;
font-size: 16px;
font-family: "微软雅黑";
border-radius:20px;;
}
.barrage .send .s_btn {
width: 105px;
height: 40px;
background: #22B14C;
color: #fff;
border-radius: 10px;
}
.barrage_close {
position: absolute;
right:210px;
bottom:10px;
width: 80px;
height: 20px;
border-radius: 10px;
text-align: center;
line-height: 20px;
color: #22B14C;
background: #fff;
z-index: 99;
}
.barrage_close1{
color: #fff;
background: #fff;
}
/* css动画 */
.content div{
animation:Text 15s infinite normal;
}
@keyframes Text{
0%{
left:100%;
}
20%{
left:75%;
}
80%{
left:0%;
}
100%{
left:-30%;
}
}
3.js部分
$(function () {
// $(".s_close").click(function () {
// $(".barrage").toggle("slow");
// });
// $(".barrage_close").toggle(function(){
// })
// init_animated();
init_barrage();
})
//将弹幕内容放进数组贮存起来
//var arr=[];
//var h=arr.push()
// 监听发送，按enter发送
document.onkeydown=function(event){
var e = event || window.event;
if(e && e.keyCode==13){
// console.log(11111);
$(".send .s_btn").click();
}
}
//提交评论
$(".send .s_btn").click(function () {
var text = $(".s_text").val();
if (text == "") {
alert('你的内容为空，请填写评论在再发送');
return false;
};
var _lable = $("<div style='right:20px;top:0px;opacity:1;color:" + getColor() + ";'class='content_text'>" + text + "</div>");
$(".content").append(_lable.show());
init_barrage();
$(".s_text").val('');
})
//初始化弹幕技术
function init_barrage() {
var _top = 0;
$(".content div").show().each(function () {
var _left = $(window).width() - $(this).width();//浏览器最大宽度，作为定位left的值
var _height = $(window).height();//浏览器最大高度
_top += 75;
if (_top >= (_height - 130)) {
_top = 0;
}
$(this).css({ left: _left, top: _top, color: getColor() });
//定时弹出文字
// var time = 10000;
// if ($(this).index() % 2 == 0) {
// time = 15000;
// }
// $(this).animate({ left: "-" + _left + "px" }, time, function () {
// $(this).remove();
// });
});
}
//获取随机颜色
function getColor() {
return '#' + (function (h) {
return new Array(7 - h.length).join("0") + h
})
((Math.random() * 0x1000000 << 0).toString(16))
}
最新文章
- 跟我学习NHibernate (1)
- CE创建进程和线程
- SharePoint 2013 新建项目字段自动加载上次保存值
- 今天<s:hidden>突然能用了
- 2014年5月份第3周51Aspx源码发布详情
- UVALive 5881 Unique Encryption Keys （DP）
- 最受欢迎的ASP.NET的CMS下载
- Hibernate的一个注释 @Transient
- ThinkPHP CURD方法盘点：page方法
- Node.js初学
- Qt中无处不在的d指针为何方神圣
- 【 D3.js 入门系列 --- 8 】 对话操作（事件）
- isset，empty,is_null小知识
- Scala 隐式转换及应用
- 一个老程序员是如何手写Spring MVC的
- nginx~为docker容器添加负载均衡
- windows10 1903 64位系统
- 合并K个排序链表(java实现)
- Mock.js——数据模板定义
- jedis集群版应用