스크롤 라인 탐색을 구현하는 jQuery 메서드 effect_jquery

이 기사의 예에서는 jQuery가 스크롤 라인 탐색 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

처음 이런 내비게이션을 본 것은 메이즈 공식 홈페이지였습니다. 당시(작년) 꽤 좋다고 생각했지만 JavaScript를 몰랐기 때문에 당시에는 '접근할 수 없는 수준'이었습니다. 시간. 오늘 QQ for Android 공식 홈페이지에 가보니 이와 비슷한 네비게이션이 있는데 어차피 할게 없어서 jQuery를 이용해서 이런 효과를 만들어 봤습니다.

효과는 다음과 같습니다.

홈
말해 보세요
로그
앨범
 
CSS:

body,ul,li{margin:0;padding:0;}
#testnav{;height:80px;background:#333;}
.testmenu{width:320px;padding-top:45px;margin:0 auto;}
.testbox div{float:left;width:80px;height:30px;text-align:center;}
.testbox a{color:#ccc;text-decoration:none;font:700 12px/1 "宋体";}
.testbox a:hover{color:#CCEEFF;text-decoration:underline;}
.testline-box{width:100%;background:#eee;}
.testline{display:block;height:3px;width:80px;background:#999;}

HTML:

<div id="testnav">
 <div class="testmenu">
  <div class="testbox">
   <div><a href="javascript:void(0)">首页</a></div>
   <div><a href="javascript:void(0)">说说</a></div>
   <div><a href="javascript:void(0)">日志</a></div>
   <div><a href="javascript:void(0)">相册</a></div>
  </div>
  <div style="clear:both;"></div>
  <div class="testline-box">
 <span class="testline"></span>
 </div>
 </div>
</div>

jQuery:

var $line=$("span.testline");
var $w=$(".testbox > div").width();
var m=0;
$(".testbox > div").each(function(n){
 var x=$w*n;
 $(this).mouseenter(function(){
  $line.stop(true,true).animate({"margin-left":x},"slow","easeOutBack");
 });
 $("a",this).click(function(){
  m=x;
 });
});
$(".testbox").mouseleave(function(){
 $line.stop(true,true).animate({"margin-left":m},"slow","easeOutBack");
});

코드가 상대적으로 거칠고 제 수준이 제한되어 있으므로 단순화하여 더 잘 작성할 수 있을 것입니다(어쨌든 일반적인 아이디어는 이렇습니다_).

참고: 이징 플러그인의 효과가 코드에 사용됩니다. 이 플러그인을 다운로드하고 참조하는 것을 잊지 마세요. 이징 플러그인을 사용하지 않으려면 JS에서 "easeOutBack"을 삭제하거나 "swing"으로 바꾸면 됩니다.

데모에서 메뉴의 링크 주소로 javascript:void(0)를 대신 사용했습니다. 주된 목적은 데모 효과를 촉진하는 것입니다. 실제 응용 프로그램에서는 현재 URL을 기반으로 현재 위치를 결정할 수 있습니다. 위치를 결정한 후 JavaScript의 변수 m에 값을 다시 할당하여 해당 줄이 어떤 메뉴에 있어야 하는지 결정할 수 있습니다. 물론 현재 위치를 알아내는 다른 방법이 있을 것이다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.