JQ实现弹幕效果
?JQ實(shí)現(xiàn)彈幕效果，快來吐糟你的想法吧
?效果圖：
?
?代碼如下，復(fù)制即可使用：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>JQ實(shí)現(xiàn)彈幕效果</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="請輸入內(nèi)容" /><input type="button" id="btn" value="發(fā)射" /></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>?如有錯(cuò)誤，歡迎聯(lián)系我改正，非常感謝！！！
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎
總結(jié)
- 上一篇： 关于动画的几种状态表示的含义以及能够使用
- 下一篇： JS实现文本中查找并替换字符