원본 JS 탄막 효과 구현을 위한 간단한 조작 안내서
현재 많은 생방송 플랫폼이나 영상 플랫폼은 탄막 강화와 관중과의 상호작용 효과를 사용한다. 그렇다면 어떻게 JS로 이런 효과를 실현할 수 있을까. 초보자의 방법으로 이 방법을 기록하고 소의 지도를 환영한다.
1. 먼저 문서를 조작하려면 Dom의 요소를 받아야 한다. 물론 여러 가지 방법이 있다. 여기는document를 사용한다.querySelector.
2. 여기도 키보드와 마우스를 보내기 위해 함수 function sendMsg () {
먼저 편집한 내용을 받아들일 용기를 만들어야 합니다. 여기는 span 라벨을 사용합니다. 물론 다른 라벨도 가능합니다.
var oSpan=document.cerateElement(“span”)
oVideoBox.appendChild(oSpan)
innerHTML로 사용자 이미지 및 탄막 내용 연결하기
oSpan.innerHTML =` < img src ="./source/lei.jpg" /> ${oContent.value}
oVideoBox 내의 무작위 높이를 초과하지 않도록 top 위치 이동의 초기
var maxTop=oVideoBox…clientHeight-oSpan.offsetHeight;
var top=Math.round(Math.random()*maxTop)
oSpan.style.top = top+ ‘px'
var timer=setInterval(()=>{
var left=oSpan.offsetLeft
left-=10
oSpan.style.left= left+ ‘px'
if(left<-oSpan.offsetWidtb){
clearInterval(timer);
oSpan.remove();}},100)
이벤트는 클릭부터 시작하고, 탄막도 클릭 이벤트 oSend를 만듭니다.onclick,
oSend.οnclick=function(){ sendMsg()}
var ev = e || event;
var keyCode = ev.keyCode || ev.which;
if (keyCode === 13 && ev.altKey) {
sendMsg();}}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> _ </title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wrapBox {
width: 800px;
height: 550px;
border: 1px solid #000;
margin: 50px auto 0;
}
.videoBox {
height: 500px;
position: relative;
overflow: hidden;
}
.videoBox img {
width: 100%;
height: 100%;
}
video {
width: 100%;
/* height: 500px; */
}
.danmuSend {
display: flex;
height: 50px;
}
#content {
flex: 1;
}
#send {
width: 100px;
}
.danmu {
color: #f00;
font-size: 20px;
position: absolute;
left: 800px;
top: 0;
white-space: nowrap;
}
.danmu img {
width: 60px;
height: 60px;
border-radius: 50%;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="wrapBox">
<div class="videoBox">
<img src="../../source/bg.jpg" />
<!-- <span class="danmu"> </span> -->
<!-- <span class="danmu"> </span>
<span class="danmu"> </span>
<span class="danmu"> </span>
<span class="danmu"> </span> -->
</div>
<div class="danmuSend">
<input id="content" type="text">
<button id="send"> </button>
</div>
</div>
</body>
<script>
var oSend = document.querySelector('#send');
var oContent = document.querySelector('#content');
var oVideoBox = document.querySelector('.videoBox');
function sendMsg() {
var content = oContent.value;
var oSpan = document.createElement('span');
oSpan.className = 'danmu';
oSpan.innerHTML = `<img src="../../source/bg.jpg">${content}`;
oVideoBox.appendChild(oSpan);
var maxTop = oVideoBox.clientHeight - oSpan.offsetHeight;
oSpan.style.top = Math.round(Math.random() * maxTop) + 'px';
var timer = setInterval(() => {
var left = oSpan.offsetLeft;
left -= 10;
oSpan.style.left = left + 'px';
if (left < -oSpan.offsetWidth) {
clearInterval(timer);
oSpan.remove();
}
}, 100);
}
oSend.onclick = function () {
sendMsg();
}
window.onkeydown = function (e) {
var ev = e || event;
var keyCode = ev.keyCode || ev.which;
if (keyCode === 13 && ev.altKey) {
sendMsg();
}
}
</script>
원생 JS의 탄막 효과 실현에 관한 이 글을 소개합니다. 원생 JS의 탄막 실현 내용과 관련된 더 많은 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
