弹幕制作
如何将弹幕分为两种，一种为普通弹幕，一种为居中弹幕，选择不同弹幕类型则显示不同的弹幕效果？如何使弹幕可自选颜色？
新手上路，请大佬们帮助？ <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 900px;
background: darkgray;
overflow: hidden;
}
#box{
position: relative;
width: 900px;
height: 550px;
margin: 50px auto;
background: darkgray;
overflow: hidden;
border-top-left-radius: 30px ;
border-top-right-radius: 30px ;
}
#movie{
position: absolute;
width: 100%;
width: 100%
top: 0;
left: 0;
}
.btn{
position: absolute;
height: 30px;
background: skyblue;
line-height: 30px;
text-align: center;
}
#box #text{
left: 0;
top: 510px;
width: 400px;
background: white;
}
#send{
left: 500px;
top: 512px;
width: 100px;
}
#hide{
left: 650px;
top: 512px;
width: 100px;
}
#show{
left: 800px;
top: 512px;
width: 100px;
}
.word{
position: absolute;
left: 500px;
color: white;
font-size: 24px;
}
</style>
</head>
<body>
<div id="box">
<video id="movie" controls="controls">
<source src="动画.mp4" type="video/mp4"></source>
</video>
<input type="text" id="text" class="btn" />
<button type="button" id="send" class="btn">发送</button>
<button type="button" id="hide" class="btn">隐藏</button>
<button type="button" id="show" class="btn">显示</button>
</div>
</body>
<script type="text/javascript">
var obox=document.getElementById("box")
var otext=document.getElementById("text")
var osend=document.getElementById("send")
var ohide=document.getElementById("hide")
var oshow=document.getElementById("show")
osend.addEventListener("click",function(){
var temp=document.createElement("span")
temp.className="word";
temp.style.top=parseInt(Math.random()*400+20)+"px";
temp.style.left=900+"px";
temp.innerHTML=otext.value;
otext.value="";
obox.appendChild(temp);
var timer=setInterval(function(){
temp.style.left=temp.offsetLeft-1+"px";
if(temp.offsetLeft+temp.offsetWidth<0)
{
obox.removeChild(temp);
}
},10)
ohide.addEventListener("click",function(){
temp.style.opacity=0;
},false)
oshow.addEventListener("click",function(){
temp.style.opacity=1;
},false)
},false)
</script>
</html>
视频地址自己换，这里我是随机位置的，你自己固定值，即可，也是几年前刚学的时候写的
yuesezhenmei 发表于 2020-11-4 23:11
*{
margin: 0;
padding: 0;
抱歉，我要的不是这个效果。 真的只会一点点 发表于 2020-11-5 17:53
抱歉，我要的不是这个效果。
temp.style.top=parseInt(Math.random()*400+20)+"px";
temp.style.left=900+"px";
那个只是忘记删了 没用的 用js控制啊 真的只会一点点 发表于 2020-11-5 17:53
抱歉，我要的不是这个效果。
我不会用js控制，要不然我就不问了 真的只会一点点 发表于 2020-11-11 11:03
我不会用js控制，要不然我就不问了
兄弟，这么对你说吧，我学前端俩年了，有点感触吧，这行要学的东西越来越多，一开始我也只会基本的html，css，后来没办法，不会其他的东西路是真难走，基本的学完（html,css,js,vue）,这时候写点单页面应用，大概几个月，会发现自己会的东西不够用，接着学scss，webpack，ts......（现在学vue3）对你有帮助，然后你会开始慢慢会工程化，模块化，你又想不能只写网页啊，要写其他啊（当时我又学了native，和electron，一个写手机端的，一个写PC端的），写着写着，发现，这时候你会发现你已经可以完成自己想写的大多数了，当然，后端一些基本的端口和数据库我们也能完成（nodejs+natapp+MongoDB），是不是觉得有点多，没事，我都能学完，这时候想，哇！我学这么久了，哈哈！（现在不主写前端了，慢慢转UE4游戏特效了，如果有不会的你可以问我，想要参考的话）
页:
[1]