HTML5实现的震撼3D焦点图动画

本文由码农网– 小峰原创，转载请看清文末的转载要求，欢迎参与我们的付费投稿计划！

这是一款基于HTML5和jQuery的3D焦点图动画，焦点图中的图片利用了CSS3的相关特性实现图片倾斜效果，从而让图片出现3D的视觉效果。这款HTML5焦点图不仅可以手动点击按钮切换图片，而且还支持自动切换图片，使用起来也相当方便。如果你需要在网站中展示产品图片，那么这款焦点图插件非常适合你。

在线演示源码下载

HTML代码

<section id="dg-container" class="dg-container"><div class="dg-wrapper"><a href="#"><img src="images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a><a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a><a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a><a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a><a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a><a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a><a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a><a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a><a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a><a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a><a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a><a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a></div><nav><span class="dg-prev">&lt;</span><span class="dg-next">&gt;</span></nav></section>

CSS代码

.dg-container{width: 100%;height: 450px;position: relative;}.dg-wrapper{width: 481px;height: 316px;margin: 0 auto;position: relative;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-o-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-perspective: 1000px;-o-perspective: 1000px;-ms-perspective: 1000px;perspective: 1000px;}.dg-wrapper a{width: 482px;height: 316px;display: block;position: absolute;left: 0;top: 0;background: transparent url(../images/browser.png) no-repeat top left;box-shadow: 0px 10px 20px rgba(0,0,0,0.3);}.dg-wrapper a.dg-transition{-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}.dg-wrapper a img{display: block;padding: 41px 0px 0px 1px;}.dg-wrapper a div{font-style: italic;text-align: center;line-height: 50px;text-shadow: 1px 1px 1px rgba(255,255,255,0.5);color: #333;font-size: 16px;width: 100%;bottom: -55px;display: none;position: absolute;}.dg-wrapper a.dg-center div{display: block;}.dg-container nav{width: 58px;position: absolute;z-index: 1000;bottom: 40px;left: 50%;margin-left: -29px;}.dg-container nav span{text-indent: -9000px;float: left;cursor:pointer;width: 24px;height: 25px;opacity: 0.8;background: transparent url(../images/arrows.png) no-repeat top left;}.dg-container nav span:hover{opacity: 1;}.dg-container nav span.dg-next{background-position: top right;margin-left: 10px;}

JavaScript代码

/** * jquery.gallery.js * http://www.codrops.com * * Copyright 2011, Pedro Botelho / Codrops * Free to use under the MIT license. * * Date: Mon Jan 30 2012 */(function( $, undefined ) {/* * Gallery object. */$.Gallery = function( options, element ) {this.$el= $( element );this._init( options );};$.Gallery.defaults = {current: 0,// index of current itemautoplay: false,// slideshow on / offinterval: 2000  // time between transitions    };$.Gallery.prototype = {_init : function( options ) {this.options = $.extend( true, {}, $.Gallery.defaults, options );// support for 3d / 2d transforms and transitionsthis.support3d= Modernizr.csstransforms3d;this.support2d= Modernizr.csstransforms;this.supportTrans= Modernizr.csstransitions;this.$wrapper= this.$el.find('.dg-wrapper');this.$items= this.$wrapper.children();this.itemsCount= this.$items.length;this.$nav= this.$el.find('nav');this.$navPrev= this.$nav.find('.dg-prev');this.$navNext= this.$nav.find('.dg-next');// minimum of 3 itemsif( this.itemsCount < 3 ) {this.$nav.remove();return false;}this.current= this.options.current;this.isAnim= false;this.$items.css({'opacity': 0,'visibility': 'hidden'});this._validate();this._layout();// load the eventsthis._loadEvents();// slideshowif( this.options.autoplay ) {this._startSlideshow();}},_validate: function() {if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {this.current = 0;}},_layout: function() {// current, left and right itemsthis._setItems();// current item is not changed// left and right one are rotated and translatedvar leftCSS, rightCSS, currentCSS;if( this.support3d && this.supportTrans ) {leftCSS = {'-webkit-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)','-moz-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)','-o-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)','-ms-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)','transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)'};rightCSS= {'-webkit-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)','-moz-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)','-o-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)','-ms-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)','transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)'};leftCSS.opacity= 1;leftCSS.visibility= 'visible';rightCSS.opacity= 1;rightCSS.visibility= 'visible';}else if( this.support2d && this.supportTrans ) {leftCSS = {'-webkit-transform': 'translate(-350px) scale(0.8)','-moz-transform': 'translate(-350px) scale(0.8)','-o-transform': 'translate(-350px) scale(0.8)','-ms-transform': 'translate(-350px) scale(0.8)','transform': 'translate(-350px) scale(0.8)'};rightCSS= {'-webkit-transform': 'translate(350px) scale(0.8)','-moz-transform': 'translate(350px) scale(0.8)','-o-transform': 'translate(350px) scale(0.8)','-ms-transform': 'translate(350px) scale(0.8)','transform': 'translate(350px) scale(0.8)'};currentCSS= {'z-index': 999};leftCSS.opacity= 1;leftCSS.visibility= 'visible';rightCSS.opacity= 1;rightCSS.visibility= 'visible';}this.$leftItm.css( leftCSS || {} );this.$rightItm.css( rightCSS || {} );this.$currentItm.css( currentCSS || {} ).css({'opacity': 1,'visibility': 'visible'}).addClass('dg-center');},_setItems: function() {this.$items.removeClass('dg-center');this.$currentItm= this.$items.eq( this.current );this.$leftItm= ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );this.$rightItm= ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );if( !this.support3d && this.support2d && this.supportTrans ) {this.$items.css( 'z-index', 1 );this.$currentItm.css( 'z-index', 999 );}// next & previous itemsif( this.itemsCount > 3 ) {// next itemthis.$nextItm= ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();this.$nextItm.css( this._getCoordinates('outright') );// previous itemthis.$prevItm= ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();this.$prevItm.css( this._getCoordinates('outleft') );}},_loadEvents: function() {var _self= this;this.$navPrev.on( 'click.gallery', function( event ) {if( _self.options.autoplay ) {clearTimeout( _self.slideshow );_self.options.autoplay= false;}_self._navigate('prev');return false;});this.$navNext.on( 'click.gallery', function( event ) {if( _self.options.autoplay ) {clearTimeout( _self.slideshow );_self.options.autoplay= false;}_self._navigate('next');return false;});this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {_self.$currentItm.addClass('dg-center');_self.$items.removeClass('dg-transition');_self.isAnim= false;});},_getCoordinates: function( position ) {if( this.support3d && this.supportTrans ) {switch( position ) {case 'outleft':return {'-webkit-transform': 'translateX(-450px) translateZ(-300px) rotateY(45deg)','-moz-transform': 'translateX(-450px) translateZ(-300px) rotateY(45deg)','-o-transform': 'translateX(-450px) translateZ(-300px) rotateY(45deg)','-ms-transform': 'translateX(-450px) translateZ(-300px) rotateY(45deg)','transform': 'translateX(-450px) translateZ(-300px) rotateY(45deg)','opacity': 0,'visibility': 'hidden'};break;case 'outright':return {'-webkit-transform': 'translateX(450px) translateZ(-300px) rotateY(-45deg)','-moz-transform': 'translateX(450px) translateZ(-300px) rotateY(-45deg)','-o-transform': 'translateX(450px) translateZ(-300px) rotateY(-45deg)','-ms-transform': 'translateX(450px) translateZ(-300px) rotateY(-45deg)','transform': 'translateX(450px) translateZ(-300px) rotateY(-45deg)','opacity': 0,'visibility': 'hidden'};break;case 'left':return {'-webkit-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)','-moz-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)','-o-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)','-ms-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)','transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)','opacity': 1,'visibility': 'visible'};break;case 'right':return {'-webkit-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)','-moz-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)','-o-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)','-ms-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)','transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)','opacity': 1,'visibility': 'visible'};break;case 'center':return {'-webkit-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)','-moz-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)','-o-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)','-ms-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)','transform': 'translateX(0px) translateZ(0px) rotateY(0deg)','opacity': 1,'visibility': 'visible'};break;};}else if( this.support2d && this.supportTrans ) {switch( position ) {case 'outleft':return {'-webkit-transform': 'translate(-450px) scale(0.7)','-moz-transform': 'translate(-450px) scale(0.7)','-o-transform': 'translate(-450px) scale(0.7)','-ms-transform': 'translate(-450px) scale(0.7)','transform': 'translate(-450px) scale(0.7)','opacity': 0,'visibility': 'hidden'};break;case 'outright':return {'-webkit-transform': 'translate(450px) scale(0.7)','-moz-transform': 'translate(450px) scale(0.7)','-o-transform': 'translate(450px) scale(0.7)','-ms-transform': 'translate(450px) scale(0.7)','transform': 'translate(450px) scale(0.7)','opacity': 0,'visibility': 'hidden'};break;case 'left':return {'-webkit-transform': 'translate(-350px) scale(0.8)','-moz-transform': 'translate(-350px) scale(0.8)','-o-transform': 'translate(-350px) scale(0.8)','-ms-transform': 'translate(-350px) scale(0.8)','transform': 'translate(-350px) scale(0.8)','opacity': 1,'visibility': 'visible'};break;case 'right':return {'-webkit-transform': 'translate(350px) scale(0.8)','-moz-transform': 'translate(350px) scale(0.8)','-o-transform': 'translate(350px) scale(0.8)','-ms-transform': 'translate(350px) scale(0.8)','transform': 'translate(350px) scale(0.8)','opacity': 1,'visibility': 'visible'};break;case 'center':return {'-webkit-transform': 'translate(0px) scale(1)','-moz-transform': 'translate(0px) scale(1)','-o-transform': 'translate(0px) scale(1)','-ms-transform': 'translate(0px) scale(1)','transform': 'translate(0px) scale(1)','opacity': 1,'visibility': 'visible'};break;};}else {switch( position ) {case 'outleft': case 'outright': case 'left': case 'right':return {'opacity': 0,'visibility': 'hidden'};break;case 'center':return {'opacity': 1,'visibility': 'visible'};break;};}},_navigate: function( dir ) {if( this.supportTrans && this.isAnim )return false;this.isAnim= true;switch( dir ) {case 'next' :this.current= this.$rightItm.index();// current item moves leftthis.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );// right item moves to the centerthis.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') );// next item moves to the rightif( this.$nextItm ) {// left item moves outthis.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );}else {// left item moves rightthis.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );}break;case 'prev' :this.current= this.$leftItm.index();// current item moves rightthis.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );// left item moves to the centerthis.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );// prev item moves to the leftif( this.$prevItm ) {// right item moves outthis.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );}else {// right item moves leftthis.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );}break;};this._setItems();if( !this.supportTrans )this.$currentItm.addClass('dg-center');},_startSlideshow: function() {var _self= this;this.slideshow= setTimeout( function() {_self._navigate( 'next' );if( _self.options.autoplay ) {_self._startSlideshow();}}, this.options.interval );},destroy: function() {this.$navPrev.off('.gallery');this.$navNext.off('.gallery');this.$wrapper.off('.gallery');}};var logError = function( message ) {if ( this.console ) {console.error( message );}};$.fn.gallery= function( options ) {if ( typeof options === 'string' ) {var args = Array.prototype.slice.call( arguments, 1 );this.each(function() {var instance = $.data( this, 'gallery' );if ( !instance ) {logError( "cannot call methods on gallery prior to initialization; " +"attempted to call method '" + options + "'" );return;}if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {logError( "no such method '" + options + "' for gallery instance" );return;}instance[ options ].apply( instance, args );});} else {this.each(function() {var instance = $.data( this, 'gallery' );if ( !instance ) {$.data( this, 'gallery', new $.Gallery( options, this ) );}});}return this;};})( jQuery );

在线演示源码下载