Sexy jQuery Hover Effects on Image - a-sexy

File Size: 666KB
Views Total: 2328
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Sexy jQuery Hover Effects on Image - a-sexy

a-sexy is an awesome and simple jQuery plugin for creating some sexy effects (pan, zoom, linear, etc) on your image when hovers over.

How to use it:

1. Load the jQuery javascript and jQuery a-sexy plugin on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.asexy.min.js"></script>

2. Insert an images in your document.

<img src="images/demo.jpg" alt="Peach and Lime" />

3. Initialize the plugin with default options.

<script type="text/javascript">
$(document).ready(function(){
$('img').asexy();
});
</script>

4. All the options.

<script type="text/javascript">
$(document).ready(function(){
$('img').sexy({
width:320,
height:240,
left:0,   // can be 'center'
top:0,// can be 'center'
zoom:true,// zoom to size
speed:500,// only in ms
opacity:0.8,  // from 0.0 to 1.0
round:60, // don't start new iterration for small different (for linear and zigzag functions)
func:"linear" // available linear, zigzag, vertical, horizontal, x  
});
});
</script>

This awesome jQuery plugin is developed by AntonShevchuk. For more Advanced Usages, please check the demo page or visit the official website.