놀라운 jquery와 유사한 플래시 탐색 모음 effect_jquery

FLASH 탐색은 현재 기본적으로 구식이지만 jQuery를 사용하여 플래시 효과를 얻을 수 있는데 이는 매우 좋습니다.

데모 주소: http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html

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

머리>
> > ~                           & Lt; 테스트 & lt;/span & gt; > > ~                      & Lt; 테스트 & lt;/span & gt; > > ~                      & Lt; 테스트 & lt;/span & gt; > > ~                         & Lt; 테스트 & lt;/span & gt; > > ~                   & Lt; 테스트 & lt;/span & gt; > > ~                   & Lt; 테스트 & lt;/span & gt; > > 본문>







코드 복사


코드는 다음과 같습니다.

$(문서).ready(함수(){
$(".menu").mouseover(function(){
      var div = $(this).children(".menu_b");
        var span = $(this).children("span");
//글꼴 숨기기, 오른쪽으로 20px 이동
       span.stop(true,false).animate({opacity:'0',left:'20px'},200)
//배경 애니메이션 표시
        div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300);       div.animate({height:'40px',marginTop:'-20px',opacity:'1'},300)
//글꼴 표시, 왼쪽으로 20px 이동
       span.animate({opacity:'1',left:'0px'},300)
       span.css({color:'#FFF'})
})

$(".menu").mouseout(function(){
      var div = $(this).children(".menu_b");
        var span = $(this).children("span");
//글꼴 숨기기, 왼쪽으로 20px 이동
       span.stop(true,false).animate({opacity:'0',left:'20px'},200)
//배경 애니메이션 표시
        div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300);       div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300)
//글꼴 표시, 오른쪽으로 20px 이동
       span.animate({opacity:'1',left:'0px'},300)
       span.css({color:'#777'})
})
})

내 취향에 맞게 애니메이션 효과를 작성했습니다. 원하는 경우 특수 효과를 직접 변경할 수 있습니다. .

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

/* 데모01 CSS */

#메인{
배경: #EEE
디스플레이: 인라인 블록
패딩: 10px
}
.menu{위치: 상대
너비: 100px
높이: 40px
여백: 10px 자동
}

.menu_b{
위치: 절대
너비:
높이: 0px
배경: 빨간색
Z-색인: 1px
최고: 50%
왼쪽: 50%
}
.메뉴 범위{
위치: 상속
디스플레이: 블록
텍스트 정렬: 가운데
줄 높이: 40px
Z-색인: 3px
글꼴 크기: 14px
글꼴 계열: "Microsoft Yahei"
색상: #777; 커서: 포인터
}
.back1{
배경: #FF0000
}
.back2{
배경: #921AFF
}
.back3{
배경: #00CACA
}
.back4{
배경: #00DB00
}
.back5{
배경: #FF5809
}
.back6{
배경: #E1E100
}



코드도 매우 간단하고, 수정도 포함해서 사용법도 매우 간단합니다.