티스토리 뷰

HMLT&CSS&JS/study

[모던웹] 17.8 jQuery Approach플러그인

turfrain 2014. 3. 17. 13:52


17.8 jQuery Approach플러그인

 1) jQuery Approach 플러그인은 마우스의 거리를 사용해 애니메이션을 발쌩시키는 플러그인

 2) 다운로드 : http://srobbin.com/jquery-plugins/jquery-approach/

 3) approach({ 스타일 } , 효과 적용거리 )

 

코드 17-25 approach()

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         * { margin:0px; padding:0px; }

  6.         body { background:0x555; }

  7.         #circle_wrapper {
  8.             padding:10px;
  9.             background-color:Black;
  10.             overflow:hidden;
  11.         }
  12.         .circle {
  13.             margin:5px;
  14.             width:50px; height:50px;
  15.             border-radius:25px;
  16.             background-color:White;
  17.             float:left;
  18.         }
  19.     </style>
  20.     <script src="http://code.jquery.com/jquery-1.7.js"></script>
  21.     <script src="jquery.approach.js"></script>
  22.     <script>
  23.         $(document).ready(function () {

  24.             var $div ="<div class='circle'></div>";                
  25.             for (i = 0; i < 10; ++i) {
  26.                 $("#circle_wrapper").append($div);
  27.             }
  28.                        
  29.             /*
  30.              *  첫번째 : 마우스 위치에 따라 변경될 속성
  31.              *  두번째 : 마우스 위치에 따라 젹용되는 범위
  32.              */                      
  33.                        
  34.             /*  type 1 */
  35.             $('.circle').approach({ opacity: 0.2 }, 200);
  36.                     
  37.                        
  38.             /*  type 2  크기에따른 움직임                         
  39.             */
  40.         });
  41.     </script>
  42. </head>
  43. <body>
  44.     <div id="circle_wrapper">       
  45.     </div>
  46. </body>
  47. </html>

 

 Q. 속성값을크기로 변경 해보기?




출처 : javaScript jQuery 입문



저작자표시 비영리

'HMLT&CSS&JS > study' 카테고리의 다른 글

[모던웹] 17.11 jQuery UI Effect 프러그인 (2) – easing 플러그인 (ease)  (0) 2014.03.17
[모던웹]17.9 ~10 jQuery UI Effect (1) 플러그인 _ (참고사항 추가)  (0) 2014.03.17
[모던웹] 17.7 애니메이션 지연  (0) 2014.03.17
[모던웹]17.6 애니메이션 정지  (0) 2014.03.17
[모던웹] 17.5 애니메이션 큐  (0) 2014.03.17
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday