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

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

　　在线演示 源码下载

　　HTML代码

　　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 item autoplay : false,// slideshow on / off interval : 2000 // time between transitions }; $.Gallery.prototype = { _init : function( options ) { this.options = $.extend( true, {}, $.Gallery.defaults, options ); // support for 3d / 2d transforms and transitions this.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 items if( 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 events this._loadEvents(); // slideshow if( 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 items this._setItems(); // current item is not changed // left and right one are rotated and translated var 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 items if( this.itemsCount > 3 ) { // next item this.$nextItm = ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next(); this.$nextItm.css( this._getCoordinates('outright') ); // previous item this.$prevItm = ( this.$