以前我们用CSS的滤镜属性来对图片做特殊的效果处理，比如阴影、模糊等。今天我们用HTML5和CSS3来实现图片的特效处理，当我们将鼠标滑过图片时，即会出现很不错的图片动画特效，像淡入淡出、放大缩小、百叶窗遮罩等HTML5特效。
http://www.html5tricks.com/demo/adipoli/index.html
<!DOCTYPE HTML>
<html>
<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>
二、
jQuery 3D图片滑块焦点图插件
这是一款很酷的jQuery 3D焦点图插件，和之前分享的jQuery焦点图不同的是，这款焦点图插件的图片切换播放样式是3D的，图片就像立方体一样可以上下翻滚，同时你不仅可以点击焦点图的左右切换按钮，也可以通过图片下方的小按钮进行图片切换。
http://www.html5tricks.com/demo/Adaptors/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery 3D 图片播放焦点图插件Adaptor在线演示</title>
<link href="css/screen.css" rel="stylesheet">
<script src="js/lib/modernizr.min.js"></script>
</head>
<body>
<div id="page">
<section>
<div id="viewport-shadow">
<a href="#" id="prev" title="go to the next slide"></a>
<a href="#" id="next" title="go to the next slide"></a>
<div id="viewport">
<div id="box">
<figure class="slide">
<img src="img/the-battle.jpg">
</figure>
<figure class="slide">
<img src="img/hiding-the-map.jpg">
</figure>
<figure class="slide">
<img src="img/theres-the-buoy.jpg">
</figure>
<figure class="slide">
<img src="img/finding-the-key.jpg">
</figure>
<figure class="slide">
<img src="img/lets-get-out-of-here.jpg">
</figure>
</div>
</div>
<div id="time-indicator"></div>
</div>
<footer>
<nav class="slider-controls">
<ul id="controls">
<li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
</ul>
</nav>
</footer>
</section>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<aside id="effect-switcher">
<h2>Select effect</h2>
<ul id="effect-list">
<li><a href="#" class="effect current" data-fx="scrollVert3d">Vertical 3D scroll</a></li>
<li><a href="#" class="effect" data-fx="scrollHorz3d">Horizontal 3D scroll</a></li>
<li><a href="#" class="effect" data-fx="scrollVert">Vertical scroll</a></li>
<li><a href="#" class="effect" data-fx="scrollHorz">Horizontal scroll</a></li>
<li><a href="#" class="effect" data-fx="blindLeft">Blind left</a></li>
<li><a href="#" class="effect" data-fx="blindDown">Blind down</a></li>
<li><a href="#" class="effect" data-fx="fade">Fade</a></li>
</ul>
</aside>
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/lib/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/box-slider-all.jquery.min.js"></script>
<script>
$(function () {
var $box = $('#box')
, $indicators = $('.goto-slide')
, $effects = $('.effect')
, $timeIndicator = $('#time-indicator')
, slideInterval = 5000;
var switchIndicator = function ($c, $n, currIndex, nextIndex) {
$timeIndicator.stop().css('width', 0);
$indicators.removeClass('current').eq(nextIndex).addClass('current');
};
var startTimeIndicator = function () {
$timeIndicator.animate({width: '680px'}, slideInterval);
};
// initialize the plugin with the desired settings
$box.boxSlider({
speed: 1000
, autoScroll: true
, timeout: slideInterval
, next: '#next'
, prev: '#prev'
, pause: '#pause'
, effect: 'scrollVert3d'
, blindCount: 15
, onbefore: switchIndicator
, onafter: startTimeIndicator
});
startTimeIndicator();
// pagination isn't built in simply because it's easy to
// roll your own with the plugin API methods
$('#controls').on('click', '.goto-slide', function (ev) {
$box.boxSlider('showSlide', $(this).data('slideindex'));
ev.preventDefault();
});
$('#effect-list').on('click', '.effect', function (ev) {
var $effect = $(this);
$box.boxSlider('option', 'effect', $effect.data('fx'));
$effects.removeClass('current');
$effect.addClass('current');
switchIndicator(null, null, 0, 0);
ev.preventDefault();
});
});
</script>
</body>
</html>