Posted in jQuery onSeptember 06, 2017
本文实例讲述了jQuery实现的弹幕效果。分享给大家供大家参考，具体如下：
看视频的时候老是会出现一些弹幕，对于这个看着很高大上的特效，其实也不难实现。
先来看看运行效果：
下面将整个代码显示出来：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3water.com弹幕</title>
<style type="text/css">
html,body{
background:#efefef;
height:100%;
}
.danmu{
width: 100px;
height:30px;
line-height: 28px;
background: green;
border-radius: 5px;
border:1px solid #fff;
color: #fff;
outline: none;
}
div.mask{
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
opacity:0.5;
top:0px;
left:0px;
}
div.bottom{
width:100%;
height:77px;
background:linear-gradient(#ccc,#4a4a4a);
position:fixed;
bottom:0px;
left:0px;
text-align:center;
line-height:77px;
}
div.bottom input.content{
width:50%;
min-width: 200px;
height:37px;
border:none;
border-radius:10px 0px 0px 10px;
font-size:16px;
padding:0 10px;
outline:none;
}
div.bottom a.send{
background-color:green;
color:#fff;
display:inline-block;
width:100px;
height:38px;
line-height:37px;
text-align:center;
position:relative;
left:-10px;
top:2px;
border-radius:0px 10px 10px 0px;
text-decoration:none;
font-family:'Microsoft Yahei';
}
div.mask a.button{
width:30px;
height:30px;
border-radius:50%;
background-color:green;
color:#fff;
position:fixed;
top:20px;
right:20px;
text-align:center;
line-height:30px;
font-size:20px;
font-family:'Microsoft Yahei';
border:1px solid #fff;
text-decoration:none;
cursor:pointer;
}
div.text{
color:#fff;
position:fixed;
right:0px;
font-size:20px;
white-space: nowrap;
}
</style>
</head>
<body>
<button class="danmu">弹幕技术</button>
<div class="mask">
<a href="#" rel="external nofollow" rel="external nofollow" class="button">X</a>
</div>
<!-- 底部发言框前端 -->
<div class="bottom">
<input class="content"></input>
<a href="#" rel="external nofollow" rel="external nofollow" class="send">发表言论</a>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$("a.send").click(function(){
var val=$(".content").val();
var content=$("<div class='text'>"+val+"</div>");
var top=Math.random()*$(document.body).height()+40+"px";
content.css("top",top);
$(".mask").append(content);
content.animate({right:$(document.body).width()+100},8000,function(){
$(this).remove();
})
});
$('.button').click(function(){
$('div.mask').fadeOut(500);
});
$(".danmu").click(function(){
$('div.mask').fadeIn(500);
});
</script>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。
jQuery实现的弹幕效果完整实例
- Author -
lucky芬声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@