|
发表于 2020-11-4 23:11:53
|
显示全部楼层
<!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>
视频地址自己换,这里我是随机位置的,你自己固定值,即可,也是几年前刚学的时候写的
|
|