jquery实现模拟弹幕功能
来源：原创
时间：2016-06-01
作者：脚本小站
分类：JS/JQuery
模拟弹幕功能，没有发送弹幕的功能，只是单纯的展示信息，滚动播放信息。
要引入jquery文件
<html>
<head>
<title>弹幕功能</title>
<meta charset="UTF-8">
<script src="js/jquery.js" type="text/javascript"></script>
<style>
#conts{
width:400px;
height:390px;
word-break:break-all;
padding:3px 0px 3px 0px;
margin:0px;
background:#EEEEEE;
overflow:hidden;
}
.wenziBox{position:relative;width:386px;height:390px;overflow:hidden;}
.dm{width:600px;height:386px;position:relative;}
.dm>div{position:absolute;top:0px;left:0px;height:30px;overflow:hidden;line-height:30px;background:#fff;}
.dm>div>a{color:#666666;}
</style>
</head>
<body>
<div id="conts">
<div class="wenziBox">
<div class="dm">
<div><a href="" target="_blank">欢迎你们ddd 的到来</a></div>
<div><a href="">欢迎你们d的到来</a></div>
<div><a href="">欢迎你们的到来</a></div>
<div><a href="">欢迎你vde们的到来</a></div>
<div><a href="" target="_blank">欢vfdv迎你们的到来</a></div>
<div><a href="">欢迎你们 的到来</a></div>
<div><a href="">欢迎你们的到来</a></div>
<div><a href="" target="_blank">欢迎你444444们的到来</a></div>
<div><a href="http://www.baidu.com" target="_blank">欢迎你们555555的到来</a></div>
<div><a href="" target="_blank">欢迎你4444333333332222们的到来</a></div>
<div><a href="">欢迎你们77777777的到来</a></div>
<div><a href="" target="_blank">欢迎你们55555555的到来</a></div>
<div><a href="">欢迎你11111111111们的到来</a></div>
</div>
</div>
</div>
<!-- 滚动的数据 -->
<div class="dmTemp2" style="display:none;">
<div><a href="" target="_blank">欢迎你们ddd 的到来</a></div>
<div><a href="">欢迎你们d的到来</a></div>
<div><a href="">欢迎你们的到来</a></div>
<div><a href="">欢迎你vde们的到来</a></div>
<div><a href="" target="_blank">欢vfdv迎你们的到来</a></div>
<div><a href="">欢迎你们 的到来</a></div>
<div><a href="">欢迎你们的到来</a></div>
<div><a href="" target="_blank">欢迎你444444们的到来</a></div>
<div><a href="http://www.baidu.com" target="_blank">欢迎你们555555的到来</a></div>
<div><a href="" target="_blank">欢迎你4444333333332222们的到来</a></div>
<div><a href="">欢迎你们77777777的到来</a></div>
<div><a href="" target="_blank">欢迎你们55555555的到来</a></div>
<div><a href="">欢迎你11111111111们的到来</a></div>
</div>
<div class="dmTemp1" style="display:none;">
<div><a href="" target="_blank">欢迎你dddddddddddddddddddddd来</a></div>
<div><a href="">欢迎你们d的到来</a></div>
<div><a href="">欢迎你们的到来</a></div>
<div><a href="">欢迎你vde们的到来</a></div>
<div><a href="" target="_blank">欢vfdv迎你们的到来</a></div>
<div><a href="">欢迎你们 的到来</a></div>
<div><a href="">欢迎你们的到来</a></div>
<div><a href="" target="_blank">欢迎你444444们的到来</a></div>
<div><a href="http://www.baidu.com" target="_blank">欢迎你们555555的到来</a></div>
<div><a href="" target="_blank">欢迎你4444333333332222们的到来</a></div>
<div><a href="">欢迎你们77777777的到来</a></div>
<div><a href="" target="_blank">欢迎你们55555555的到来</a></div>
<div><a href="">欢迎你11111111111们的到来</a></div>
</div>
<script>
$(function () {
init_screen();
setInterval(startRequest1,5000);
});
function init_screen(){
var _top = 0;
var h = 30;// 字幕框高度
var _height = $('.wenziBox').height();
var _width = $('.wenziBox').width();
console.log(_width);
$('.dm').find('div').each(function (){
if($(this).is(':animated')){return;}
_top = _top + h;
if(_top > _height - h){_top = 0;}
var start_left = _width + random(-10,400);//左边字幕开始区域的未知
$(this).css({left: start_left, top: _top}).find('a').css({color:getReandomColor()});
var time = random(14000,25000);
end_left = _width + 500;//字幕结束消失的位置（相对于显示区域的这个框）
$(this).animate({left: "-" + end_left + "px"}, time, function(){
$(this).remove();
});
});
}
var dmTemp = 1;
function startRequest1(){
if(dmTemp == 1){
html = $('.dmTemp1').html();
dmTemp = 2;
}else{
html = $('.dmTemp2').html();
dmTemp = 1;
}
$(".dm").append(html);
init_screen();
}
//获取范围内的随机数
function random(min,max){
return Math.floor(min+Math.random()*(max-min));
}
// 随机颜色
function getReandomColor() {
return '#' + (function (h){return new Array(7 - h.length).join("0") + h})((Math.random() * 0x1000000 << 0).toString(16))
}
</script>
</div>
</body>
</html>