원생 js 를 이용 하여 생방송 탄막 스크롤 효 과 를 모 의 하 다.

1.기본 원리
먼저 생방송 구역 을 10 부(저 는 개인 적 으로 계산 하기 편리 하도록 10 부 로 나 누 었 습 니 다)로 나 누 어 입력 한 내용 을 10 부 구역 에 무 작위 로 넣 고 10 부 구역 오른쪽 보 기 를 제외 하고 애니메이션 을 호출 하여 무 작위 속도 로 오른쪽 에서 왼쪽으로 이동 합 니 다.왼쪽 구역 보기 로 이동 할 때 이 스크롤 요 소 를 제거 합 니 다.
2.구체 적 인 코드

<div class="move_video_content">
    <div class="video_content">
        <div class="video_div" id="video_view"></div>
        <div class="scroll_content">
            <ul class="scroll_ul" id="scroll_ul_id"></ul> 
        </div>
    </div>
    <div class="input_content">
            <input type="text" class="input_text" maxlength="30" placeholder="         " id="input_text_id">
            <button type="button" class="button_btn" id="send_btn">  </button>
    </div>
</div>

구체 적 인 효 과 는 다음 과 같다.

js 코드 는 다음 과 같 습 니 다.

let inputText = document.getElementById("input_text_id");//input   
let scrollContent = document.getElementById("scroll_ul_id");//     
let videoView = document.getElementById("video_view");//    
let videoWidth = videoView.offsetWidth;//        
let listHeight = videoView.offsetHeight/10;//          
let listTopNum = [0,1,2,3,4,5,6,7,8,9];//          10 
document.getElementById("send_btn").addEventListener("click",function(){//      
    let value = inputText.value;//       
    if(!value) return;
    appendDom(value);//              
    createVideoBulletChatDom(value);//            
    inputText.value = '';//     
    scrollContent.scrollTop = scrollContent.scrollHeight;//       
})
function appendDom(value){//              
    let li = document.createElement("li");
    li.setAttribute("class","scroll_li");
    li.innerHTML = value;
    scrollContent.appendChild(li);
}
let speedArr = ['normal','fast','faster'];
function createVideoBulletChatDom(value){//            
    let num = listTopNum[Math.floor((Math.random()*listTopNum.length))];
    let p = document.createElement("p");
    p.setAttribute("class","video_p");
    p.style.top = (num * 60) + "px";
    p.style.left = videoWidth + "px";
    p.innerHTML = value;
    videoView.appendChild(p);
    let speed = speedArr[Math.floor((Math.random()*speedArr.length))];
    Animate(p,speed);//    
}
let animateType = {
    'normal':5,
    'fast':10,
    'faster':15
}
function Animate(dom,speed){//    
    let domWidth = dom.offsetWidth;//         
    let distance = videoWidth;//        
    speed ? speed : 'normal';
    let interval = animateType[speed]
    let timer = setInterval(function(){
            distance -= interval;
            dom.style.left = distance + 'px';
            if(distance <= -domWidth){
                clearInterval(timer);
                videoView.removeChild(dom);//            
            }
    },50)
}

생방송 영역 에 따라 10 부(listTopNum)로 나 뉘 어 각 층 의 높이(listHeight)를 가 져 온 다음 스크롤 탭 의 top 을 바 꾸 어 10 부 에 삽 입 된 다른 영역 을 실현 합 니 다.
스크롤 탭 을 만 들 면 스크롤 애니메이션(함수 Animate)을 만 듭 니 다.기본 속 도 는 normal 입 니 다.애니메이션 을 만 들 때마다 랜 덤 속도 형식(normal,fast,fast)이 무 작위 로 들 어 옵 니 다.들 어 오 는 속도 유형 에 따라 스크롤 할 때마다 줄 어 든 거 리 를 크게 바 꾸 고 서로 다른 스크롤 속 도 를 실현 합 니 다.
총결산
이것 은 개인 이 한가 할 때 일어 난 생방송 스크롤 애니메이션 으로 웹 소켓 을 더 하면 여러 사람의 동기 통신 을 실현 할 수 있 기 때문에 앞으로 더 이상 보완 할 일이 없다.
구체 적 인 코드 는[:github.com/liqc-wwl/bu..]를 방문 하여 다운로드 하면 바로 효 과 를 볼 수 있 습 니 다.
원생 js 를 이용 하여 생방송 탄막 스크롤 효 과 를 모 의 하 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 js 모 의 생방송 탄막 스크롤 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!