<!DOCTYPE HTML>
<html xmlns:fb="http://ogp.me/ns/fb#" itemscope itemtype="http://schema.org/Blog">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5/CSS3鼠标滑过图片滤镜动画效果DEMO演示</title>
<meta property="og:title" content="Adipoli 1.0"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://jobyj.in/adipoli"/>
<meta property="og:image" content="http://jobyj.in/adipoli/img/adipoli.png"/>
<meta property="og:site_name" content="jobyj"/>
<meta property="og:description"
content="An amazing jQuery image hover plugin. 20+ transition effects."/>
<META NAME="Description" CONTENT="An amazing free to use jQuery image hover plugin with more than 20 transition effects">
<meta itemprop="name" content="Adipoli jQuery Image Hover Effects">
<meta itemprop="description" content="An amazing jQuery image hover plugin. 20+ transition effects.">
<meta itemprop="image" content="http://jobyj.in/adipoli/img/adipoli.png">
<meta property="fb:admins" content="100000682718088"/>
<link href="css/demo.css" rel="stylesheet" type="text/css"/>
<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="http://jobyj.in/favicon.ico" />
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.row1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$('.row2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$('.row3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$('.row4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$('.row5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});
$('.row6').adipoli({
'startEffect' : 'grayscale',
'hoverEffect' : 'normal'
});
$('#adipoli-download').fadeTo('slow',1);
});
</script>
</head>
<body>
<div id="fb-root">
<!-- The JS SDK requires the fb-root element in order to load properly. -->
</div>
<div id="container">
<div id="overview"></div>
<div class="effect-container">
<div class="effect-details">startEffect : grayscale, hoverEffect : normal(For HTML5 Browsers)</div>
<img class="img-style row6" src="img/gallery-images/6_1.png"/>
<img class="img-style row6" src="img/gallery-images/6_2.png"/>
<img class="img-style row6" src="img/gallery-images/6_3.png"/>
</div>
<div class="effect-container">
<div class="effect-details">startEffect : normal, hoverEffect : popout</div>
<img class="img-style row1" src="img/gallery-images/1_1.png"/>
<img class="img-style row1" src="img/gallery-images/1_2.png"/>
<img class="img-style row1" src="img/gallery-images/1_3.png"/>
</div>
<div class="effect-container">
<div class="effect-details">startEffect : overlay, hoverEffect : sliceDown</div>
<img class="img-style row2" src="img/gallery-images/2_1.png"/>
<img class="img-style row2" src="img/gallery-images/2_2.png"/>
<img class="img-style row2" src="img/gallery-images/2_3.png"/>
</div>
<div class="effect-container">
<div class="effect-details">startEffect : transparent, hoverEffect : boxRandom</div>
<img class="img-style row3" src="img/gallery-images/3_1.png"/>
<img class="img-style row3" src="img/gallery-images/3_2.png"/>
<img class="img-style row3" src="img/gallery-images/3_3.png"/>
</div>
<div class="effect-container">
<div class="effect-details">startEffect : overlay, hoverEffect : foldLeft</div>
<img class="img-style row4" src="img/gallery-images/4_1.png"/>
<img class="img-style row4" src="img/gallery-images/4_2.png"/>
<img class="img-style row4" src="img/gallery-images/4_3.png"/>
</div>
<div class="effect-container">
<div class="effect-details">startEffect : transparent, hoverEffect : boxRainGrowReverse</div>
<img class="img-style row5" src="img/gallery-images/5_1.png"/>
<img class="img-style row5" src="img/gallery-images/5_2.png"/>
<img class="img-style row5" src="img/gallery-images/5_3.png"/>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#adipoli-download').fadeTo('fast', 0.10);
$('#adipoli-download').click(function(){
if($(this).attr('href')=='#download')
{
alert('Please click like button to enable download link.');
}
else
{
_gaq.push(['_trackPageview', 'adipoli.zip-v2']);
}
});
});
</script>
</body>
</html>
HTML5+CSS3实现的鼠标滑过图片滤镜动画特效源码.zip （24个子文件） 
132689838921495885 css 
adipoli.css 441B demo.css 4KB img gallery-images 
4_1.png 100KB 2_3.png 122KB 1_2.png 102KB 3_1.png 116KB 5_3.png 86KB 6_2.png 105KB 2_2.png 148KB 6_1.png 108KB 4_2.png 98KB 2_1.png 113KB 4_3.png 96KB 5_2.png 120KB 5_1.png 110KB 1_3.png 69KB 3_2.png 112KB 1_1.png 149KB 3_3.png 92KB 6_3.png 105KB
index.html 6KB js jquery.adipoli.min.js 8KB jquery-1.7.1.js 92KB adipoli.css 441B资源评论
