<img src="http://files.jb51.net/file_images/article/201305/201352161501921.gif?201342161524" alt="jQuery 탄력적 슬라이딩 탐색 메뉴 구현 아이디어 및 code_jquery" ><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="44625" class="copybut" id="copybut44625" onclick="doCopy('code44625')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code44625"> <br><-- 이 기사는 저자의 아이디어를 참조합니다: http://runjs.cn/code/ouvvjqka, jquery 코드는 별도로 작성되었습니다 --> <br><!-- 이 기사의 출처: http://blog.csdn .net/liuyanzhi08 --> ; <BR><!-- 구현 아이디어: <BR>CSS: 절대 위치의 div를 애니메이션 슬라이더로 사용하고 왼쪽 속성을 변경하여 애니메이션 효과를 제공합니다. <BR>javascript: hover ()는 마우스를 내비게이션으로 이동시키는 동작입니다. 내비게이션 내비게이션에서 벗어나는 동작(즉, 현재 내비게이션으로 돌아가는 동작) <BR>--> <br><!DOCTYPE HTML> <br><html> <br><head> <br> <meta charset="UTF-8" /> <br><meta name="author" content="Nancle" /> 🎜><title>jQuery 탄력적 슬라이딩 탐색 메뉴</title> <br><style type="text/css"> <br>body{font-family:"Microsoft YaHei";} <br>#nav_wrapper { 위치:상대적; 너비:835px; 여백:80px 자동; 하단:2px #ddd solid;} <br>#nav_wrapper #nav_menu{ 높이:50px;} <br>#nav_wrapper #nav_menu a{ 디스플레이:블록; float:왼쪽; 높이:50px; 선 높이:50px; 색상:#666; 텍스트 장식:없음;} <br>#nav_wrapper #nav_animate_block{ 위치: 절대; :-2px; 높이:2px; 오버플로:숨김; 배경:#80b600 ;} <br></style><script type="text/javascript" src="http://ajax.googleapis.%20com/ajax/libs/jquery/1.9.1/jquery.min.js"><script type="text/javascript"> <BR>$(function(){ <BR>var $current_nav = $("#current_nav"); // 현재 요소(현재 탐색 항목) <BR>var current_nav_width = $current_nav.innerWidth() <BR>var current_nav_left = $current_nav.position().left ; <BR>var $nav_animate_block = $("#nav_animate_block") ; //애니메이션 슬라이더<BR>$nav_animate_block.css({ width:current_nav_width, left:current_nav_left }) //초기 상태에서 애니메이션 슬라이더 위치 현재 요소에 있습니다<BR>//마우스가 a 요소에 들어가면 애니메이션이 트리거됩니다. Event<BR>$("#nav_menu a").hover(function(){ <BR>var index = $(this) .index(); <BR>var $a_cur = $("#nav_menu").find ("a").eq(index);//마우스가 이동하는 a 요소<BR>//트리거된 요소 사용 왼쪽 위치와 너비를 얻기 위한 요소 인덱스<BR>var width = $a_cur.innerWidth() ; <BR>var left = $a_cur.position().left <BR>//애니메이션 슬라이더 위치 설정<BR>$nav_animate_block.stop().animate({ <BR>width: width, <BR>left : left <BR>}, 300) <BR>}, function(){ <BR>//마우스가 떠날 때 a 요소인 경우 애니메이션 슬라이더가 현재 요소 위치로 돌아갑니다. <BR>$nav_animate_block.stop().animate({ <BR>width: current_nav_width, <BR>left: current_nav_left <BR>}) <BR>}) <BR>}) <BR></head> <BR><body> <BR><div id=" nav_menu"> <BR><a href="#" id="current_nav">홈페이지</a> ; <BR><a href="#">제품 목록</a> <BR>< ;a href="#">고객 사례</a> <BR><a href=" #">서비스 플랫폼</a> <BR><a href="#">커뮤니케이션 포럼< /a> <BR><a href="#">회사 소개</a> <BR></div><BR><div id="nav_animate_block"</div> ></div> <BR></body> <BR></html></script> </div>