자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)

jquery.blinghover-0.1.js

링크같은걸 롤오버 했을때 색깔이 바로 훅 바뀌지 않고, 보드랍게 에니메이션 처리되면서 서서히 색깔을 바꾸게 해주는 훌러그인이다.

※ 설치 (jquery 와 jquery-ui 훌러그인이 필요하다.)

1 2 3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> <script src="jquery.blinghover-0.1.js" type="text/javascript"></script>

사용법 및 데모

1. 디폴트

1 2 3 4 5 6 7

<script type="text/javascript">     $("a").blingHover(); </script>   <a href="#">테스트 링크1</a> <a href="#">테스트 링크2</a> <a href="#">테스트 링크3</a>

테스트 링크1 테스트 링크2 테스트 링크3

2. 롤오버 컬러지정

1 2 3 4 5 6 7

<script type="text/javascript">     $("a.test1").blingHover("rgb(0, 255, 0)"); </script>   <a href="#" class="test1">테스트 링크4</a> <a href="#" class="test1">테스트 링크5</a> <a href="#" class="test1">테스트 링크6</a>

테스트 링크4 테스트 링크5 테스트 링크6

3. 롤오버 컬러지정

1 2 3 4 5 6 7

<script type="text/javascript">     $("a.test2").blingHover("#ff8600"); </script>   <a href="#" class="test2">테스트 링크7</a> <a href="#" class="test2">테스트 링크8</a> <a href="#" class="test2">테스트 링크9</a>

테스트 링크7 테스트 링크8 테스트 링크9

4. 롤오버 에니메이션 시간 및 컬러지정

1 2 3 4 5 6 7

<script type="text/javascript">     $(".demo_links span.test3").blingHover({color:"#ff8600",time:500}); </script>   <span class="test3">테스트 span10</span> <span class="test3">테스트 span11</span> <span class="test3">테스트 span12</span>

테스트 span10 테스트 span11 테스트 span12

2011/11/07 - [Javascript] - javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기

2011/11/06 - [jQuery Plugin] - jQuery datepicker 팝업창 사이즈 바꾸기

2011/11/06 - [jQuery Plugin] - jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기

2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)

2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1

2011/08/30 - [jQuery Plugin] - jQuery Plugin : Slider