弹幕 js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹幕</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
             div{
              position: relative;
              bottom: -460px;
              left: 500px;
              height: 100px;
              background-color: #fff;
              overflow: none;
             }
             body img{
              width: 400px;
             }
             .mytest{
              width: 500;
              height: 400px;
             }
	</style>
</head>
<body>
<div class="mytest">
  
</div>
<div>
     <input type="text">
    <button  type="button">发射</button>
</div>
   

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
                                  	
<script>

                                        $(function(){
                                             var  colors=['red',"green","hotpink","pink","cyan","yellowgreen","purple","deepskyblue"];
                                                   $("button").click(function(event) {
                                                    var  randomColor=parseInt(Math.random() * colors.length) ;
                                                    var  randomY=parseInt(Math.random()*400);
                                                    console.log(randomY);
                                                     var  text=$("input").val();
                                                     var  $span=$('<span></span>').text(text)
                                                     .css("color",colors[randomColor]).css("left",2000).css("top",randomY).animate({left: -500}, 3000,function(){
                                                      //到了终点删除
                                                      $(this).remove();
                                                     }).appendTo('.mytest');   //插入字体且设置颜色

                                                   });
                                  		});
</script>
</body>
</html>
猜你喜欢
