JavaScript css 3 간단 한 비디오 탄막 기능 구현

8053 단어 js영상 탄막
본 고 는 demo 를 써 서 가장 간단 한 영상 탄막 기능 을 모 의 했다.
생각:
를 재생 하 는 video 의 크기 와 일치 하도록 설정 하고 이 div 라벨 을 video 위 에 덮어 서 탄막 을 설치 합 니 다.비디오 오른쪽 에
    목록 을 놓 아서 탄막 목록 을 표시 합 니 다.
    화면 위의 탄막 은 내용 을탭 에 넣 습 니 다.보통 한 줄 의 글 자 는 왼쪽 에서 오른쪽으로 날 아 갑 니 다.간단하게 보기 위해 서 이 이동 은 CSS 3 의 transition 속성 을 사용 합 니 다.position 를 absolute 로 설정,
    그러면 transition 의 과도 한 left 속성 을 사용 하여 탄막 의 이동 을 실현 합 니 다.물론 부모 요 소 를 설정 하 는 스타일 overflow:hidden 에 주의해 야 합 니 다.이렇게 글씨체 가 날 아 갈 때 날 아 가 는 부분 을 숨 깁 니 다.
    보 내 기 를 누 르 면 input 의 내용,현재 날짜,비디오 재생 의 진도 video.currentTime 을 가 져 와 이 내용 을 하나의 대상 으로 배열 에 저장 합 니 다.탄막 을 설치 한 span 라벨 을 div 몽 판 에 넣 고 left 를 설정 하면 transition 은 현재 left 에서 다음 left 로 과도 하 게 이동 합 니 다.과도 가 끝 난 후 이 span 라벨 은 쓸모 가 없습니다.removeChild 로 부모 요소 에서 제거 합 니 다.동시에 생 성 된
  • 탭 을 ul 에 추가 합 니 다.
    코드:
    
<!--Created by CC on 2017/10/11-->
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    .mainBody{
        margin: 10px auto;
        text-align: center;
        font-family: arial;
        position:relative;
    }
    .send{
       width:700px;
        margin:0px auto;
        text-align:left;
    }
     .my-msg{
         width:85%;
         height:35px;
     }
    .my-btn{
        background-color: #ccd0d7;
        border-radius: 8px;
        width: 50px;
        height: 35px;
        margin-left:30px;
        border:1px solid  #00a1d6;
    }
    .my-list{
        display:inline-block;
        vertical-align: top;
        border:1px solid #ccd0d7;
        width:200px;
        height:450px;
        overflow: auto;
    }
    .my-tm{
        position:absolute;
        top:0px;
        height:366px;
        width: 710px;
        overflow:hidden;
    }
    .rtol{
        position:absolute;
        display: inline-block;
        height:28px;
        overflow: hidden;
        font-size:24px;
        color:#fff;
        left:720px;
        -moz-transition:left 4s linear;
        -webkit-transition:left 4s linear;
        -o-transition:left 4s linear;
    }
    ul{
        text-align: left;
        list-style-type:none;
        margin-top:0px;
        padding-left: 8px;
    }
    li span {
        text-align: left;
        color: #99a2aa;
 
    }
</style>
<body>
<div>
    <div class="mainBody">
        <div style="display:inline-block">
        <video src="/big_buck_bunny.mp4"  height="400" controls></video>
        <div class="send">
            <input type="text" class="my-msg" id="msgcc" placeholder="    ~">
            <input type="button" class="my-btn"  id="sendcc" value="  ">
        </div>
        </div><div class="my-list">
            <span style="color: #00a1d6">~  ~</span>
            <hr style="border-top:2px solid #185598"/>
            <ul id="msg">
            </ul>
        </div>
        <div class="my-tm" id="tmbox">
        </div>
    </div>
</div>
<script>
    var tm=document.getElementById('tmbox');
    var btn=document.getElementById('sendcc');
    var video=document.getElementsByTagName('video')[0];
    var list=document.getElementById('msg');
    var msg=document.getElementById('msgcc');
    var infor=[];
 
    window.οnlοad=function()
    {
        //    
       tm.style.left=(document.body.offsetWidth-911)/2+'px';
    }
    window.οnresize=function(){
        tm.style.left=(document.body.offsetWidth-911)/2+'px';
    }
    //      
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes();
        return currentdate;
    }
 
    //     
    btn.οnclick=function(){
        var value=msg.value;
        if(value&&value!='')
        {
            var itemInfor={};
            itemInfor.value=value;
            itemInfor.showTime=video.currentTime;  //  
            itemInfor.sendTime=getNowFormatDate();     //    
 
 
            //    
            var li=document.createElement('li');
            li.className='my-li';
            li.innerHTML="<span> > "+value+"</span>";
            list.appendChild(li);
 
            //    
            var text=document.createElement('span');
            text.className='rtol';
            text.style.top=Math.floor( Math.random()*12 )*30+'px';
            text.innerHTML=value;
            tm.appendChild(text);
 
            //    
            setTimeout(function(){
                text.style.left=-value.length*25+'px';
            },200);
 
            //       span  
            setTimeout(function(){
                    tm.removeChild(text)
                     //                ，         
                    infor.push(itemInfor);
                },5000
            )
        }
    }
 
    //      
  setInterval(function(){
      if(video.paused==false)
      {
          infor.forEach(function(item){
              var currentTime=video.currentTime;
              if(item.showTime<video.currentTime&&item.showTime>=(video.currentTime-0.5))
              {
                  var text=document.createElement('span');
                  text.className='rtol';
                  text.style.top=Math.floor( Math.random()*12 )*30+'px';
                  text.innerHTML=item.value;
                  tm.appendChild(text);
 
                  //    
                  setTimeout(function(){
                      text.style.left=-(item.value.length*25)+'px';
                  },200);
 
                  //       span  
                  setTimeout(function(){
                          tm.removeChild(text);
                      },5000
                  )
 
              }
          });
      }
    },500)
</script>
 
 
</body>
</html>
    효과:

    이렇게 쓰 는 것 은 간단 하지만 큰 문 제 는 transition 과도 left 속성 이 멈 출 수 없다 는 것 입 니 다.그래서 자 연 스 럽 게 이 transition 애니메이션 은 실 행 될 때 까지 기다 릴 수 밖 에 없습니다.또는 모든탭 의 이동 은 interval 타이머 로 이동 합 니 다.하지만 이렇게 쓰 려 면 좀 복잡 해 야 한다.
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Python 다 중 스 레 드 및 다 중 스 레 드 에서 join()의 사용 방법 예제
vue Nprogress 진도 항목 기능 흔 한 문제 실현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage