基于JavaScript实现弹幕特效
网络 2017-08-31 1406
本文实例为大家分享了js实现弹幕特效的具体代码，供大家参考，具体内容如下
此处使用HBuilder编译，最简单的弹幕效果，希望各位前辈不吝指教。
注意用的是jquery-2.0.3.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> *{ padding: 0; margin: 0; } .shooter{ width: 600px; height: 60px; /*background: black;*/ margin: 0 auto; } .shooter input{ width: 300px; height: 40px; border: none; border-radius: 7px; box-shadow: 0 0 8px rgba(182,195,214,0.6)inset; padding-left: 15px; margin-top: 10px; } .shooter button{ width: 80px; height: 40px; border: none; margin-left: 10px; background-color:#339B53; border-radius:8px; color: white; cursor: pointer; } .shooter button:hover{ font-size: 14px; background:#008000; } .content{ width: 100%; height: 600px; background: gray; position: relative; overflow: hidden; } .bullet{ position: absolute; /*right: 0;*/ /*left:1600px;*/ word-break: keep-all; /*不让单词折行*/ } </style> <body> <div class="shooter"> <input type="text"/> <button>发射</button> </div> <div class="content"> </div> <script type="text/javascript" src="js/jquery-2.0.3.js" ></script> <script type="text/javascript"> $("button").click(function(){ var msg = $("input").val(); //取出输入框内容 if(msg.length > 15){ alert("字数不得超过15个！"); return; } var bullet = $("<div>"); //生成一条弹幕 bullet.text(msg); //将输入框内容放置到div中 bullet.addClass("bullet"); //为bullet这个div添加样式bullet bullet.css("top",Math.round(Math.random()*500)); //随机设置弹幕位置 bullet.css("left","1600px"); bullet.css("font-size",Math.round(Math.random()*60)+12+"px"); bullet.css("color","rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"); // alert(window.getComputedStyle(bullet,null).width); bullet.animate({ left:-1000//此处视为bug，应该随着弹幕的长短而变化 },Math.round(Math.random()*9000)+1000,"linear", function(){ bullet.remove(); //当运动结束时，删除弹幕 }); $(".content").append(bullet); //将弹幕添加到屏幕中 }); </script> </body> </html> |
下一篇：js实现水平滚动菜单导航
