JS 모션 프레임워크 공유 사이드바 애니메이션 예제_javascript 기술

이 글의 예시에서는 JS 모션 프레임워크에서 사이드바 애니메이션을 공유하는 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
 
    <머리> 
         
         
        <스타일 유형="텍스트/css"> 
        *{ 
            여백:0px; 
            패딩:0px; 
        } 
            #div1{ 
                너비:319px; 
                높이: 340px; 
                테두리: 1px 단색 #FFF; 
                위치: 절대; 
                상단:100px; 
                왼쪽:-320px; 
                배경 이미지: url(images/1.png); 
                배경 반복:반복 안함 ; 
            } 
            #div1 범위{ 
                너비:30px; 
                높이: 130px; 
                테두리: 1px 단색 파란색; 
                위치: 절대; 
                오른쪽:-23px; 
                상단:95px; 
                배경: 빨간색; 
                글꼴 모음: "微软雅黑"; 
                색상: #FFFFFF; 
                텍스트 정렬: 중앙; 
                줄 높이: 40px; 
                테두리 반경: 0px 200px 200px 0px; 
            } 
         
        <스크립트 유형="텍스트/자바스크립트"> 
            window.onload=function(){ 
                var oDiv=document.getElementById("div1"); 
                var oSpan=oDiv.getElementsByTagName('span')[0]; 
                var 시간=널; 
                var 속도=8; 
                oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件
                    ClearInterval(시간); 
                    시간=setInterval(함수(){ 
If(oDiv.offsetLeft>=0){clearInterval(time);}
>                              아웃 아웃   oDiv.style.left=oDiv.offset왼쪽 속도 'px'
~                                        },1);                                ~                          oDiv.onmouseout=function(){//전체 div에 마우스 아웃 이벤트 추가
에게 시간=setInterval(함수(){
If(oDiv.offsetLeft<=-320){clearInterval(time);}
>                          oDiv.style.left=oDiv.offsetLeft-속도 'px'
~                                     },1);                                  ~        ~   >
                                                                          & Lt; & lt;/span & gt; >