jQuery_jquery를 사용하여 메뉴에 민감한 마우스 슬라이딩 애니메이션 효과를 구현하는 방법
- WBOY원래의
- 2016-05-16 16:12:021167검색
이 기사의 예에서는 jQuery가 메뉴에 민감한 마우스 슬라이딩 애니메이션 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
본 코드의 테스트 환경은 IE9이며, IE8 이하 브라우저에서는 지원하지 않을 수 있으니 양해 바랍니다.
이 JS 마우스 슬라이딩 효과는 jQuery를 사용하여 간단한 애니메이션을 구현하는데, jquery가 더 나은 쓰기 방법을 가지고 있다는 사실에 놀랐습니다. 애니메이션 메서드 전에 중지 메서드를 추가하면 마우스 뒤에 이를 실현할 수 있습니다. 밖으로 이동하면 아니오 그런 다음 슬라이딩 효과를 수행합니다.
코드 복사 코드는 다음과 같습니다.
<스타일>
body{font-size:12px;font-family:Tahoma,Arial,Verdana;color:#fff; 배경:#000; 높이:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td ,i{패딩: 0;여백:0}
fieldset,img {경계:0}
.clear{ 지우기:둘 다;}
주소,캡션,인용,코드,dfn,em,th,var {font-weight:normal;font-style:normal}
ol,ul {목록 스타일:없음}
캡션,번째 {text-align:left}
h1,h2,h3,h4,h5,h6 {글꼴 크기:100%}
약어,약어,img {경계:0}
버튼,입력,선택,텍스트 영역{글꼴 크기:100%;}
입력,버튼,텍스트 영역,선택,옵션 그룹,옵션{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
테이블 {border-collapse:collapse;border-spacing:0;}
a{텍스트 장식:없음;}
a:hover {텍스트 장식:밑줄;}
.clearfix:after {visibility: hiden;display: block;font-size: 0;content: ".";clear:both;}
.all ul{ 너비:100%; 텍스트 정렬:중심;}
.all ul li{ 너비:100%; 높이:40px; 테두리 하단:1px 점선 #990066;
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목