javascript - 让弹幕滑出弹幕框后消失应该用什么方法?
本文介绍了javascript - 让弹幕滑出弹幕框后消失应该用什么方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<div class="danmu">
<div class="screen">
</div>
<div class="operate">
<input type="text" name="input" placeholder="说点什么" />
<p>
<button class="act">发射</button>
<button>清屏</button>
</p>
</div>
</div>
$(document).ready(function(){
$(".act").click(function(){
//点击发射后
//得到输入的弹幕
var input = $(":input").val();
//将输入的弹幕包裹在p标签内
var danmu = $("<p class = 'actDanmu'>" + input + "<\/p>");
//将弹幕以p标签形式加进弹幕框
$(".screen").append(danmu);
//弹幕右边距
var right = parseInt($(".screen").css("marginRight"));
//弹幕可以出现的最上面的位置
var top_loc = parseInt($(".screen").css("marginTop"));
//弹幕可以出现的最下面的位置
var bottom_loc = parseInt($(".screen").css("height"));
//设置弹幕出现的范围
var location = Math.floor(Math.random() * Math.floor(bottom_loc/25)) * 25 + top_loc;
$(danmu).css({
"right":right + "px",
"top":location + "px"
});
//弹幕完全滑出弹幕框所需宽度
var dis = right - parseInt($(danmu).css("width"));
//弹幕滑出动画
$(danmu).animate({left:dis},12000);
//清空输入框内的内容方便再次输入
$(":input").val("");
})
})
*{
padding: 0;
margin: 0;
}
/*弹幕框*/
.screen{
width: 1300px;
height: 380px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 25px auto;
overflow: hidden;
}
/*操作栏的输入框*/
.operate input{
display: block;
margin: 0 auto;
padding-left: 10px;
width: 400px;
height: 35px;
border-radius: 3px;
border: 1px solid #cccccc;
}
/*操作栏*/
.operate p{
text-align: center;
}
/*操作栏的按钮*/
.operate p button{
background-color: #fff;
color: #b0a8a5;
letter-spacing: 4px;
width: 160px;
height: 35px;
margin-top: 25px;
border: 1px solid #b0a8a5;
border-radius: 3px;
}
/*操作栏的发射按钮*/
.operate p button:first-child{
border-color: red;
color: red;
}
/*用户输入的弹幕*/
.actDanmu{
position:absolute;
line-height: 25px;
padding: 0;
margin: 0;
}
解决方案
$(danmu).animate({left:dis},12000,function(){
//动画完成后执行的回调方法
});
这篇关于javascript - 让弹幕滑出弹幕框后消失应该用什么方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文