jQuery Animated Border 是一個很可愛的外掛，它會在區塊的周圍再產生新的小區塊，接著再利用 gif 圖片當背景圖片來產生像是動畫邊框的效果。
套件名稱：jQuery Animated Border
套件版本：0.1.0-alpha
作者網站：http://there4development.com/projects/animatedborder/
套件網址：N/A
發佈日期：2010-02-20
檔案大小：3.57 KB
檔案下載：jquery.animatedborder.js
參數說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 | size(選填) 描述： 邊框寬度 預設值： 2 color(選填) 描述： 邊框顏色 預設值： '#6699CC' |
方法說明：
檢視原始碼 JavaScript
1 2 3 | // 在指定元素周圍產生邊框動畫效果 // 呼叫第二次則會移除效果 $(selector).animatedBorder(options); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.animatedborder.js"></script> <style type="text/css"> .alpha, .bravo, .charlie { width: 100px; height: 100px; float: left; border: 1px solid black; margin: 5px; padding: 5px; background: #ffffff; } /* 以下 3 段 css 必須要有 */ .animatedBorderSprite { position: absolute; background: url(img/stripe.gif); margin: 0; } .animatedBorderSprite-top { -moz-border-radius-topleft: 2px; -webkit-border-radius-topleft: 2px; border-top-left-radius: 2px; -moz-border-radius-topright: 2px; -webkit-border-radius-topright: 2px; border-top-right-radius: 2px; } .animatedBorderSprite-bottom { -moz-border-radius-bottomleft: 2px; -webkit-border-radius-bottomleft: 2px; border-bottom-left-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-radius-bottomright: 2px; border-bottom-right-radius: 2px; } </style> <script type="text/javascript"> $(function(){ // 邊框寬度 1px red $('.alpha').animatedBorder({ size: 1, color: 'red' }); // 重覆呼叫 animatedBorder() 可進行切換 $('.bravo').click(function(){ $(this).animatedBorder(); return false; }); // 邊框寬度 6px #FFCC66 $('.charlie').animatedBorder({ size: 6, color: '#FFCC66' }); }); </script> <body> <div class="alpha">細的邊框</div> <div class="bravo"><a href="">開關切換</a></div> <div class="charlie">粗的邊框</div> </body> |