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

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

WBOY

풀어 주다： 2016-05-16 16:11:18

원래의

1402명이 탐색했습니다.

이 글의 예시에서는 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;
>