以前我们用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>