| <style type="text/css"> | |
| *{padding: 0;margin: 0;box-sizing: border-box;} | |
| .con{ | |
| 100%; | |
| margin: 0 auto; | |
| } | |
| .box{ | |
| 1200px; | |
| height: 500px; | |
| background: #D9D9D9; | |
| margin-top: 50px; | |
| position: relative; | |
| overflow: hidden; | |
| margin: 50px auto 0; | |
| } | |
| .box h3{ | |
| text-align: center; | |
| line-height: 500px; | |
| } | |
| .box .dm{ | |
| position: absolute; | |
| display: table; | |
| } | |
| .ipt{ | |
| 1200px; | |
| margin: 0 auto; | |
| margin-top: 10px; | |
| position: relative; | |
| border: 1px solid #999; | |
| } | |
| .ipt input{ | |
| border: none; | |
| text-indent: 10px; | |
| 100%; | |
| padding: 10px 0; | |
| } | |
| .ipt button{ | |
| position: absolute; | |
| border: none; | |
| top: 0; | |
| right: 0; | |
| height: 35px; | |
| padding: 0 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="con"> | |
| <div class="box"> | |
| <h3>弹幕区域</h3> | |
| </div> | |
| <div class="ipt"> | |
| <input id="ipt" type="text" name="" id="" value="" placeholder="请输入弹幕" /> | |
| <button id="btn_fs">发送</button> | |
| </div> | |
| </div> | |
| <script src="jquery1.11.1.min.js"></script> | |
| <script type="text/javascript"> | |
| //点击发送 | |
| $("#btn_fs").on("click",function(){ | |
| send() | |
| }); | |
| //回车发送 | |
| $("#ipt").on("keydown",function(e){ | |
| if (e.keyCode === 13) { | |
| send() | |
| } | |
| }) | |
| //发送 | |
| function send(){ | |
| if ($("#ipt").val() != "" && $("#ipt").val().length<= 15) { | |
| createEle(); | |
| $("#ipt").val("") | |
| }else{ | |
| alert("弹幕不能为空或者不能超过15个字符") | |
| } | |
| } | |
| //创建元素 | |
| function createEle(){ | |
| var sjs = Math.ceil(Math.random()*$(".box").height()) //弹幕高度的随机数 | |
| var spanEle = $("<span class='dm'></span>"); //创建span元素 | |
| spanEle.html($("#ipt").val()) //追加文本内容 | |
| $(".box").append(spanEle) //追加到box | |
| spanEle.css("right",-spanEle.width()+"px"); //设置css属性，right | |
| spanEle.css("top",sjs+"px") //设置css属性，top | |
| roll(spanEle) //调用弹幕,将元素传参，进行弹幕 | |
| }; | |
| //弹幕滚动 | |
| function roll(ele){ | |
| var num = -ele.width(); //span元素的宽 | |
| var w = $(ele).width(); //span元素的宽 | |
| setInterval(function(){ | |
| var left = $(ele).offset().left; //span元素的left值 | |
| num++; | |
| if (left<= -w) { //判断left是否小于span的宽 | |
| clearInterval() //清除定时器 | |
| $(ele).remove() //清除span | |
| return | |
| } | |
| $(ele).css("right",num+"px"); | |
| },10) | |
| } | |
| </script> | |
| </body> |