前端开发代码：jQury弹幕

由前端开发者 · 2018年5月15日20:52:54

摘要：前端开发代码|前端开发者 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <t……

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a>> <head> <meta charset=”utf-8″ /> <title></title> <style type=”text/<a href="https://www.rokub.com/category/css" title="css">css</a>”> *{ 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/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>/1.9.1/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>.<a href="https://www.rokub.com/category/javascript" title="js">js</a>”></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(“” + $value + “”); $(“#txt”).val(“”); var _top=parseInt(pageH*(Math.random())); var num=parseInt(colorArr.length*(Math.random())); $(“p:last-child”).<a href="https://www.rokub.com/category/css" title="css">css</a>({“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>

前端开发代码|前端开发者

https://www.rokub.com

» 本文来自：前端开发者 » 《前端开发代码：jQury弹幕》

» 本文链接地址：https://www.rokub.com/2784.html

» 您也可以订阅本站：https://www.rokub.com