본문 바로가기

스크립트/Image,Text관련

jquery 이용한 간단한 스크롤로 오버메뉴 구현

http://www.itcan.kr/?doc=list.php&id=portfolio1

응용

출처 - http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=105&docId=174196463&qb=anF1ZXJ5IOuplOuJtOuwlA==&enc=utf8&section=kin&rank=1&search_sort=0&spq=0&pid=RP1KKF5Y7vssstgYa/lsssssstd-478954&sid=Ue1ML3JvLDYAAEbkGoU

<!DOCTYPE HTML>
<HTML lang="KO">
 <head>
 <title></title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){

     $('.menu').hover(function() {
          $(this).stop().animate({scrollTop:20}, 100);
     },function() {
         $(this).stop().animate({scrollTop:0}, 100);
     });

});
 </script>
 </head>
 <body>
<div class="menu" style="border:0px; width:100px; height:20px; overflow:hidden; float:left;"> <img src="bu_001.jpg" style="width:100px; height:20px; display:block;" /> <img src="bu_002.jpg" style="width:100px; height:20px; display:block;" /> </div>
<div class="menu" style="border:0px; width:100px; height:20px; overflow:hidden; float:left;"> <img src="bu_003.jpg" style="width:100px; height:20px; display:block;" /> <img src="bu_004.jpg" style="width:100px; height:20px; display:block;" /> </div>
</body>
</html>