弹幕的实现效果
今天我给大家分享一下我自己写的一个弹幕效果。
首先，它的静态图为左边是一个字母弹框区，右边有个注册
当点击登录时，他会出现一个背景为透明的注册框：
当验证通过时注册框消失，主页面的红色注册按钮也消失，随机会在右下角出现输入框：
之后你在输入输入框内输入内容就会出现弹幕效果了。
实现代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width: 1006px; height: 506px; top: -450px; left: 200px; position: relative; border: 3px solid coral; box-sizing: border-box; } #left{ position: relative; left: 203px; top:53px; width: 700px; height: 500px; overflow: hidden; } #left img{ width: 100%; height: 100%; } #right{ width: 300px; height: 500px; position: absolute; right: 0; } #btn_dl{ width: 300px; height: 60px; text-align: center; line-height: 50px; background: red; font-size: 30px; margin-top: 230px; } #p_1{ width: 300px; height: 30px; position: absolute; right: 0; bottom: 2px; display: none; } #p_1 input{ width: 240px; height: 30px; } #p_1 button{ width: 50px; height: 30px; } #box1{ width: 1000px; height: 500px; position: absolute; background: rgba(0,0,0,.5 ); display: none; } table{ width: 300px; height: 300px; text-align: center; background: white; position: absolute; left: 40%; top: 20%; } #top_1{ width: 300px; height: 200px; position: absolute; right: 0; top: 0; overflow: hidden; } ul{ width: 300px; height: 30px; position: absolute; right: 0; bottom: 40px; display: none; } li{ width: 98px; list-style: none; border: 1px solid red; height: 35px; text-align: center; line-height: 35px; float: left; } #dm{ position: absolute; border: 1px solid red; top:0; } </style> <script src="../../第三周/2月21/js/jquery-3.1.1.js"></script> <script> $(document).ready(function(){ $("#btn_dl").click(function(){ $("#box1").show(); //注册框显示 // 点击登录 $("#btn_dl1").click(function(){ var tex=/^1{10}\d/ if(tex.test($("#ipt_sj").val())&& !$("#ipt_xm").val()==""){ $("#box1").hide();//注册框隐藏 $('ul').show(); $("#p_1").show(); $('#btn_dl').hide(); $("#btn_yz").click(function(){ $("#top_1").append("<p>"+$('#ipt_xm').val()+":"+$('#ipt_1').val()+"</p>") var $p=$("<p>"+$("input").val()+"</p>"); $("#left").append($p) // 设置$p的样式 $p.css({ "position":"absolute", "left":$("#left").width(), "top":ran(0,$("#left").height()-$p.height()), "color":"rgb("+ran(0,255)+","+ran(0,255)+","+ran(0,255)+")", "fon-size":ran(12,24)+"px", "fon-weight":"bold", "width":"auto",//自动宽 "white-space":"nowrap",//强制一行 "border":"" }) // 计时器 var timer=null; timer=setInterval(fn,30) function fn(){ $p.animate({"left":"-=10px"},30) if($p.css("left")<="-"+$p.width()){ $p.remove() } } // 随机位置 function ran(a,b){ return Math.floor(Math.random()*(b-a+1)+a) } }) }else{ if(!tex.test($("#ipt_sj").val())){ alert("手机号输入不正确") } if($("#ipt_xm").val()==""){ alert('请输入姓名') } } }) }) }) </script> </head> <body> <div id="left"> <img src="../../第三周/2月21/img/b4.jpg" alt=""/> </div> <div id="box"> <div id="right"> <p id="btn_dl">登录</p> <p id="top_1"></p> <ul> <li>样式一</li> <li>样式二</li> <li>样式三</li> </ul> <p id="p_1"> <input type="text" id="ipt_1"/> <button id="btn_yz">登录</button> </p> </div> <div id="box1"> <table> <tr> <td>姓名</td> <td><input type="text" id="ipt_xm"/></td> </tr> <tr> <td>手机</td> <td><input type="text" id="ipt_sj"/></td> </tr> <tr> <td colspan="2"><button id="btn_dl1">登录</button></td> </tr> </table> </div> </div> </body> </html>
