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>