能在屏幕发送弹幕代码<div class="box1" id="box1"> <div class="box2" id="box2"> <div class="kuang"> <p class="title">吐槽:</p> <input type="text" class="text" id="text"/> <button type="button" class="btn" id="btn">发射</button> </div> </div> </div> <script src="../jquery-3.7.0.js"></script> <script type="text/javascript">
时间: 2023-07-19 09:41:05 浏览: 110
jQuery-仿哔哩哔哩视频弹幕代码.zip
可以的,这是一个基于HTML、CSS和JavaScript的弹幕发送代码,具体实现过程如下:
HTML部分:
```
<div class="box1" id="box1">
<div class="box2" id="box2">
<div class="kuang">
<p class="title">吐槽:</p>
<input type="text" class="text" id="text"/>
<button type="button" class="btn" id="btn">发射</button>
</div>
</div>
</div>
```
其中,box1和box2是容器,kuang是弹幕发送框,title是标题,text是输入框,btn是发送按钮。
CSS部分:
```
.box1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}
.box2 {
background-color: #fff;
width: 400px;
height: 200px;
box-shadow: 0px 0px 10px #ccc;
}
.kuang {
margin-top: 30px;
text-align: center;
}
.title {
font-size: 20px;
font-weight: bold;
}
.text {
width: 300px;
height: 30px;
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 5px;
padding-left: 10px;
}
.btn {
width: 100px;
height: 30px;
margin-top: 20px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
```
其中,使用了一些常见的CSS属性,包括定位、大小、颜色、阴影、边框、圆角等。
JavaScript部分:
```
$("#btn").click(function() {
var text = $("#text").val();
var top = Math.floor(Math.random() * ($("#box2").height() - 30));
var color = "#" + Math.floor(Math.random() * 0xffffff).toString(16);
var speed = Math.floor(Math.random() * 5) + 1;
var div = $("<div>").text(text).css({
"position": "absolute",
"top": top,
"left": $("#box2").width() + 10,
"color": color,
"font-size": "16px",
"white-space": "nowrap"
});
$("#box2").append(div);
div.animate({
"left": -div.width()
}, speed * 1000, function() {
$(this).remove();
});
});
```
其中,使用了jQuery库和一些JavaScript方法,包括随机数、样式设置、元素创建、动画效果等。当用户点击发送按钮后,会生成一个新的弹幕元素,并在屏幕上滚动。
阅读全文