jQuery 강좌 | Plugins > Hoverizr - 이미지를 흑백(grayscale)으로 만들어주는 플러그인

Hoverizr는 이미지를 흑백으로 만들어주는 jQuery Plugin입니다.

플러그인을 적용하면 이미지가 흑백으로 변하고, 마우스를 올리면 원래의 색으로 돌아옵니다.

흑백 이외에 반전, 흐리게 효과도 줄 수 있습니다.

단, IE8 이하에서는 작동하지 않는다는 단점이 있습니다.

사용법

다음의 링크에서 플러그인을 다운로드 받습니다.

http://www.iliasiovis.com/hoverizr/#download

다음과 같이 스크립트를 만듭니다.

<script src="//code.jquery.com/jquery-1.11.0.js"></script>
<script src="jquery.hoverizr.min.js"></script>
<script>
  $( document ).ready( function() {
    $( '#imageid' ).hoverizr();
  } );
</script>

사용할 수 있는 옵션은 다음의 링크에 있습니다.

http://www.iliasiovis.com/hoverizr/#documentation

예제

http://book.cmsfactory.net/jQuery/V01/Plugins/Hoverizr/Hoverizr.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Plugin | Hoverizr</title>
    <script src="//code.jquery.com/jquery-1.11.0.js"></script>
    <script src="jquery.hoverizr.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#a' ).hoverizr();
        $( '#b' ).hoverizr( {
          effect: 'invert',
        } );
        $( '#c' ).hoverizr( {
          effect: 'blur',
        } );
      } );
    </script>
  </head>
  <body>
    <p><img src="mylego.png" id="a"></p>
    <p><img src="mylego.png" id="b"></p>
    <p><img src="mylego.png" id="c"></p>
  </body>
</html>

Category

Created on 2014-06-09 19:06 | Updated on 2015-07-17 00:47

이 글을 공유하기

Kakao

Book navigation