前端开发代码|前端开发者 html 代码 <!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=”utf-8″ /><br /> <title></title><br /> <style type=”text/css”><br /> *{<br /> padding: 0;<br /> margin: 0;<br /> }<br /> #box{<br /> height:700px;<br /> width:1000px;<br /> margin: 0 auto;<br /> border:1px solid #000000;<br /> position: relative;<br /> }<br /> #main{<br /> width:100%;<br /> height:605px;<br /> position: relative;<br /> overflow: hidden;<br /> }<br /> p{<br /> position: absolute;<br /> left:1000px;<br /> width:200px;<br /> top:0;<br /> }<br /> #bottom{<br /> width:100%;<br /> height:80px;<br /> background: #ABCDEF;<br /> text-align: center;<br /> padding-top: 15px;<br /> position: absolute;<br /> left: 0;<br /> bottom: 0;<br /> }<br /> #txt{<br /> width:300px;<br /> height:50px;<br /> }<br /> #btn{<br /> width:100px;<br /> height:50px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div id=”box”><br /> <div id=”main”></p> <p> </div><br /> <div id=”bottom”><br /> <input type=”text” id=”txt” placeholder=”请输入内容” /><br /> <input type=”button” id=”btn” value=”发射” /><br /> </div><br /> </div><br /> <script src=”http://libs.baidu.com/jquery/1.9.1/jquery.js”></script><br /> <script type=”text/javascript”><br /> $(function(){<br /> var pageH=parseInt($(“#main”).height());<br /> var colorArr=[“#cfaf12″,”#12af01″,”#981234″,”#adefsa”,”#db6be4″,”#f5264c”,”#d34a74″];<br /> $(“#btn”).bind(“click”,auto);<br /> document.onkeydown=function(e){<br /> if(e.keyCode == 13){<br /> auto();<br /> }<br /> };<br /> function auto(){<br /> var $value = $(“#txt”).val();<br /> $(“#main”).append(“<p>” + $value + “</p>”);<br /> $(“#txt”).val(“”);<br /> var _top=parseInt(pageH*(Math.random()));<br /> var num=parseInt(colorArr.length*(Math.random()));<br /> $(“p:last-child”).css({“top”:_top,”color”:colorArr[num],”font-size”:”20px”});<br /> $(“p:last-child”).animate({“left”:”-200px”},10000);<br /> $(“p:last-child”).stop().animate({“left”:”-300px”},10000,”linear”,function(){<br /> $(this).remove();<br /> });<br /> //console.log($value);<br /> };</p> <p> })<br /> </script><br /> </body><br /> </html> 前端开发代码|前端开发者 https://www.rokub.com » 本文来自:前端开发者 » 《前端开发代码_jQury弹幕》 » 本文链接地址:https://www.rokub.com/2784.html » 您也可以订阅本站:https://www.rokub.com
评论前必须登录!
注册