站长资讯网
最全最丰富的资讯网站

JQ实现弹幕效果

JQ实现弹幕效果,快来吐糟你的想法吧

JQ实现弹幕效果代码如下,复制即可使用:

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title>JQ实现弹幕效果</title>         <style type="text/css">             *{                 padding: 0;                 margin: 0;             }             #box{                 height:700px;                 width:1000px;                 margin: 0 auto;                 border:1px solid #000000;                 position: relative;             }             #main{                 width:100%;                 height:605px;                 position: relative;                 overflow: hidden;             }             p{                 position: absolute;                 left:1000px;                 width:200px;                 top:0;             }             #bottom{                 width:100%;                 height:80px;                 background: #ABCDEF;                 text-align: center;                 padding-top: 15px;                 position: absolute;                 left: 0;                 bottom: 0;             }             #txt{                 width:300px;                 height:50px;                 }             #btn{                 width:100px;                 height:50px;                             }         </style>     </head>     <body>         <div id="box">             <div id="main">                              </div>             <div id="bottom">                 <input type="text" id="txt" placeholder="请输入内容" />                 <input type="button" id="btn" value="发射" />             </div>         </div>         <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>         <script type="text/javascript">             $(function(){                 var pageH=parseInt($("#main").height());                 var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];                                 $("#btn").bind("click",auto);                 document.onkeydown=function(e){                     if(e.keyCode == 13){                         auto();                     }                 };                 function auto(){                     var $value = $("#txt").val();                     $("#main").append("<p>" + $value + "</p>");                     $("#txt").val("");                     var _top=parseInt(pageH*(Math.random()));                     var num=parseInt(colorArr.length*(Math.random()));                     $("p:last-child").css({"top":_top,"color":colorArr[num],"font-size":"20px"});                     $("p:last-child").animate({"left":"-200px"},10000);                     $("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){                         $(this).remove();                    });                                     //console.log($value);                 };                              })         </script>     </body> </html>

赞(0)
分享到: 更多 (0)