标签：javascript 弹幕
简单实现弹幕效果，注意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>
标签：javascript 弹幕
原文地址：http://blog.csdn.net/pleasurehappy/article/details/45653061
