弹幕效果

来源：互联网发布：淘宝apple store优惠券编辑：程序博客网时间：2024/04/30 06:29
简单实现弹幕效果，注意jQuery文件的引用
<!doctype html><html><head><meta charset="urf-8"/><style>body{border:0;margin:0;padding:0;}.slade_div{width:100%;height:100%;background:#000;opacity:0.8;filter:alpha(opacity=70);position:absolute;top:0;}.slade_div .close_opt{display:block;background:red;line-height:40px;text-align:center;width:40px;height:40px;color:#fff;border-radius:20px;position:absolute;right:10px;top:5px;font-size:26px;}.slade_div ul{height:850px;overflow:hidden;}.slade_div ul li{list-style:none;color:#fff;position:absolute;font-size:22px;white-space:nowrap;font-weight:bold;}.slade_div .footer{height:50px;border-top:1px solid #fff;text-align:center;line-height:50px;padding-top:15px;}.slade_div .footer .text_msg{width:500px;height:30px;border:1px solid red;font-size:18px;color:#188333;}.slade_div .footer .send{width:90px;height:30px;background:#188eee;}.show_opt{display:block;margin:315px 450px;font-size:200px;color:#823748;}.slade_div h1{  position: absolute;  top: 7px;  left: 475px;  color: #CF1;  font-size: 40px;}</style><script src="js/jquery-1.11.1.min.js" type="text/javascript"></script></head><body><a class="show_opt">click</a><div class="slade_div"><a class="close_opt">X</a><h1>^_^^_^^_^Demo^_^^_^^_^</h1><ul><li>?????AAAAAAAAAAAAAAAAAAAAAAAAAAAAA?????</li><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA......</li><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA......</li><li>AAAAAAAAAAAAAAAAAAAAA......</li><li>AAAAAAAAAAAAAAAAAAAAA......</li><li>AAAAAAAAAAAAAAAAAAAAA......</li><li>AAAAAAAAAAAAAAAAAAAAA......</li><li>AAAAAAAAAAAAAAAAAAAAA......</li><li>AAAAAAAAAAAAAAAAAAAAA......</li><li>AAAAAAAAAAAAAAAAAAAAA......</li></ul><div class="footer"><input type="text" class="text_msg"/> <input type="button" class="send" value="说说吧"/></div></div><script type="text/javascript">$(function(){$('a.close_opt,a.show_opt').click(function(){$('div.slade_div').toggle('slow');});$('.send').click(function(){var msg = $('.text_msg').val();if(msg == '')return false;$('ul').append('<li>'+msg+'</li>');init_animate();});init_animate();setTimeout(function(){setInterval(function(){$('.text_msg').val('BBBBBBBBBBBBBBBBBBBBBBBBB');$('.send').click();},200);},5000)});var arr = ['4','5','6','7','8','9','a','b','c','d','e','f'];function getRandomColor(){var cVal = '#';for(var i=0;i<6;i++){var index = Math.ceil(Math.random()*arr.length) - 1;cVal += arr[index];}return cVal;}function init_animate(){var _top = 0;$('ul>li').each(function(){if(_top >= 800)_top=0;_top += 75;var liwidth = $(this).width();var _width = $(window).width();var _cval = getRandomColor();var time = 0;var _index = $(this).index()%3;switch(_index){case 0:time = 8000;break;case 1:time = 9000;break;case 2:time = 9500;break;default:break;}$(this).css({top:_top,color:_cval,left:_width});$(this).animate({left:'-'+liwidth},time,function(){this.remove();});});}</script></body></html>
0 0