Inset Border Effect 網頁元素動態邊框

Inset Border Effect 這是一個能夠幫圖片或這是網頁的元素增加一個動態邊框的套件，基於 jQuery 框架製作。當滑鼠移到上面時邊框就會自動消失，當滑鼠移出作用區域時邊框又會自動的增加上去，就跟 CSS 的 hover 的功能基本上是差不多的，只是讓邊框消失或者是重新出現的時候，增強了他的動畫效果，像是淡入淡出之類的。

使用方法：
第一步 載入 Inset Border Effect 程式需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 載入 Inset Border Effect 的主程式碼-->
<script src="jquery.insetBorderEffect.js"></script>

第二步 寫入邊框的範例 HTML 元素
    <table>
      <tr>
        <td>
          <ul>
            <li><img class="hover_img_default" src="img/stockpic1.jpg" alt="text" /></li>
            <li><img class="hover_img_default" src="img/stockpic2.jpg" alt="text" /></li>
            <li><img class="hover_img_default" src="img/stockpic3.jpg" alt="text" /></li>
          </ul>
        </td>
        <td>
          <h2>Default</h2>
          <pre>$(selector).insetBorder();</pre>
        </td>
      </tr>
      <tr>
        <td>
          <ul>
            <li><img class="hover_img_border" src="img/stockpic1.jpg" alt="text" /></li>
            <li><img class="hover_img_border" src="img/stockpic2.jpg" alt="text" /></li>
            <li><img class="hover_img_border" src="img/stockpic3.jpg" alt="text" /></li>
          </ul>
        </td>
        <td>
          <h2>Big Border</h2>
          <pre>$(selector).insetBorder({
  inset: 50
});</pre>
        </td>
      </tr>
      <tr>
        <td>
          <ul>
            <li><img class="hover_img_border_uncentered1" src="img/stockpic1.jpg" alt="text" /></li>
            <li><img class="hover_img_border_uncentered2" src="img/stockpic2.jpg" alt="text" /></li>
            <li><img class="hover_img_border_uncentered3" src="img/stockpic3.jpg" alt="text" /></li>
          </ul>
        </td>
        <td>
          <h2>Not centered</h2>
          <pre>$(selector).insetBorder({
  insetleft: 60,
  insetright: 40,
  insettop: 14,
  insetbottom: 86
});</pre>
        </td>
      </tr>
      <tr>
        <td>
          <ul>
            <li><img class="hover_img_borderColor" src="img/stockpic1.jpg" alt="text" /></li>
            <li><img class="hover_img_borderColor" src="img/stockpic2.jpg" alt="text" /></li>
            <li><img class="hover_img_borderColor" src="img/stockpic3.jpg" alt="text" /></li>
          </ul>
        </td>
        <td>
          <h2>Colored Border </h2>
          <pre>$(selector).insetBorder({
  borderColor: "#000000"
});</pre>
        </td>
      </tr>
      <tr>
        <td>
          <ul>
            <li><img class="hover_img_speed" src="img/stockpic1.jpg" alt="text" /></li>
            <li><img class="hover_img_speed" src="img/stockpic2.jpg" alt="text" /></li>
            <li><img class="hover_img_speed" src="img/stockpic3.jpg" alt="text" /></li>
        </ul>
        </td>
        <td>
          <h2>Slower Speed</h2>
          <pre>$(selector).insetBorder({
  speed: 500
});</pre>
        </td>
      </tr>
      <tr>
        <td>
          <ul>
            <li><img class="hover_img_bt" src="img/stockpic1.jpg" alt="text" /></li>
            <li><img class="hover_img_bt" src="img/stockpic2.jpg" alt="text" /></li>
            <li><img class="hover_img_bt" src="img/stockpic3.jpg" alt="text" /></li>
          </ul>
        </td>
        <td>
          <h2>Double Border</h2>
          <pre>$("selector").insetBorder({
  borderType: "double"
});</pre>
        </td>
      </tr>
      <tr>
        <td>
          <ul>
            <li><div id="shape1"></div></li>
            <li><div id="shape2"></div></li>
          </ul>
        </td>
        <td>
          <h2>Rectangles</h2>
          <pre>$("selector").insetBorder();</pre>
        </td>
      </tr>
    </table>

第三步 寫入 JavaScript 程式碼片段
$(function() {
  $(".hover_img_default").insetBorder();
  $(".hover_img_border").insetBorder({
inset: 50
  });
  $(".hover_img_border_uncentered1").insetBorder({
insetleft: 45,
insetright: 55,
insettop: 80,
insetbottom: 20
  });
  $(".hover_img_border_uncentered2").insetBorder({
insetleft: 60,
insetright: 40,
insettop: 14,
insetbottom: 86
  });
  $(".hover_img_border_uncentered3").insetBorder({
insetleft: 95,
insetright: 5,
insettop: 15,
insetbottom: 85
  });
  $(".hover_img_borderColor").insetBorder({
borderColor: '#d8b231',
cssClassInner: "test_mate"
  });
  $(".hover_img_speed").insetBorder({
speed: 500
  });
  $(".hover_img_bt").insetBorder({
borderType: "double"
  });
  $("#shape1, #shape2").insetBorder({
borderColor: "#900"
  });
});

附上 Inset Border Effect 可修改參數表

參數	預設	說明
speed	250	過場動畫速度
borderColor	'#ffffff'	邊框顏色
inset	10	框線寬度
borderType	"solid"	框線類型
outerClass	"ibe_outer"	外圍的CSS類別名稱
innerClass	"ibe_inner"	內線的CSS類別名稱

作者網站：http://css-tricks.com/examples/InsetBorderEffect/
檔案大小：28.9 KB (包含範例)
檔案下載：http://css-tricks.com/examples/InsetBorderEffect.zip
檔案備份：下載