jQuery自制弹幕效果 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         html,body{
13             width: 100%;
14             height: 100%;
15         }
16         p{
17             display: inline-block;
18         }
19 
20         span{
21             position: absolute;
22         }
23         .boxDom{
24             width: 100%;
25             height: 100%;
26             position: relative;
27             overflow: hidden;
28         }
29         .idDom{
30             width: 100%;
31             height: 20%;
32             position: fixed;
33             bottom: 0;
34             background-color: #ccc;
35         }
36         .content{
37             position: absolute;
38             top:0;
39             right: 0;
40             left:0;
41             bottom:0;
42             width: 30%;
43             height: 20%;
44             margin: auto;
45         }
46 
47 
48     </style>
49 
50 
51 </head>
52 <body>
53     <div class="boxDom">
54         <div class="idDom">
55             <div class="content">
56                 <p>弹幕内容</p>
57                 <input type="text">
58                 <button>launch</button>
59             </div>
60         </div>
61     </div>
62 
63 
64 
65     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
66     <script>
67 
68         $(function () {
69 
70             var colors = ["#000","#f00","#0f0","#00f","#f1f","#f10215","#f40","#ccc","#ff7"];
71 
72             $("button").click(function () {
73                 var text = $("input[type=\"text\"]").val();
74                 var Y = parseInt(Math.random() * ($(".boxDom").height() - $(".idDom").height()));
75                 var selectedColor = colors[parseInt(Math.random() * colors.length)];
76 
77                 //开始创建弹幕
78                 $("<span></span>").text(text).css("color",selectedColor).css("left","-10px").css("top",Y).animate({left:$(window).width()},3000,"linear",function () {
79                     $(this).remove();
80                 }).prependTo(".boxDom");
81 
82                 $("input[type=\"text\"]").val("");
83 
84             });
85 
86 
87             $("input[type=\"text\"]").keyup(function (e) {
88                 if(e.keyCode==13){
89                     $("button").click();
90                 }
91             });
92 
93 
94         });
95     </script>
96 
97 
98 </body>
99 </html>

 

posted @ 2019-06-25 23:16  programerfield  阅读(154)  评论(0)    收藏  举报