Lightweight jQuery Plugin For Inset Border Effects - Inset Border
File Size: | 4.5KB |
---|---|
Views Total: | 587 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Inset Border is a lightweight (~2kb unminified) jQuery plugin for putting animated inset border effect around the html elements (typically images).
How to use it:
1. Include the latest jQuery javascript library and jquery.insetborder.js script on your web page
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jquery.insetborder.js"></script>
2. Insert an image that you'd like to apply the inset border effect to
<a href="#" class="demo"> <img src="1.png"/> </a>
3. Call the borderEffect()
function with options
<script type="text/javascript"> $(document).ready(function(){ $('a.demo').borderEffect({ borderColor : '#cccccc', speed : 100, // the speed of animations (ms) borderWidth: 10, borderClass : "border-effect", zIndex : 100 }); }); </script>
This awesome jQuery plugin is developed by ghophp. For more Advanced Usages, please check the demo page or visit the official website.