思路如下:
- 依据web的三层架构搭建好页面
- 处理页面逻辑
一.基本结构的搭建
我需要的样式如上图:所以我的基本结构也就明确下来了
1.html结构骨架
<div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">吐槽:</p>
<input type="text" class="text" id="text" />
<input type="button" class="btn" id="btn" value="发射">
</div>
</div>
</div>
2.CSS样式基础
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: "微软雅黑";
font-size: 62.5%;
}
.boxDom {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
width: 100%;
height: 100px;
background: #666;
position: fixed;
bottom: 0px;
}
.content {
display: inline-block;
width: 430px;
height: 40px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
.title {
display: inline;
font-size: 4em;
vertical-align: bottom;
color: #fff;
}
.text {
border: none;
width: 300px;
height: 30px;
border-radius: 5px;
font-size: 2.4em;
}
.btn {
width: 60px;
height: 30px;
background: #f90000;
border: none;
color: #fff;
font-size: 2.4em;
}
span {
width: 300px;
height: 40px;
position: absolute;
overflow: hidden;
color: #000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
white-space: nowrap;
}
二.JS思路的分析
我要做的是弹幕效果,弹幕效果的重要元素如下:
- 发射按钮
- 在页面上滚动的文字
所以可以确定事件为button按钮的点击事件;在我点击完以后,就会把纪录在输入框的内容弹出去,在页面部分显示,所以这里需要动态创建一个span标签用来保存我获取到的输入框的内容,同时也用于显示在页面上滚动,这里引入了jQuery的动画函数来完成!
$(function() {
//获取输入框
var $txt = $('#text');
//给按钮添加点击事件
$('#btn').click(function() {
//如果内容为空,不执行
if( $txt.val().trim() === '' ) {
return;
}
$('<span></span>')
.text( $txt.val() )
.css({
color: 'red', //颜色固定为红色
left: $(window).width(),
top: 400 //top固定为400
})
.animate({
left: -200
}, 10000, 'linear', function() {
$(this).remove(); //移除span元素
})
.appendTo( '#boxDom' );
// 清空内容
$txt.val('');
});
})
这样一个简单的弹幕效果就完成了,但是效果比较单一,颜色是固定的,然后高度也是固定的,而且还没有enter键入事件,所以还可以继续进行优化!