简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  HTML5实现的震撼3D焦点图动画详解介绍

HTML5实现的震撼3D焦点图动画详解介绍

黄舟
黄舟asal
2017-03-04 16:51:161883semak imbas

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

在线演示源码下载

HTML代码

<section id="dg-container" class="dg-container">
	<p class="dg-wrapper">
		<a href="#"><img src="images/1.jpg" alt="image01"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/2.jpg" alt="image02"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/3.jpg" alt="image03"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/4.jpg" alt="image04"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/5.jpg" alt="image05"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/6.jpg" alt="image06"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/7.jpg" alt="image07"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/8.jpg" alt="image08"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/9.jpg" alt="image09"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/10.jpg" alt="image10"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/11.jpg" alt="image11"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/12.jpg" alt="image12"><p>http://www.php.cn/;/p></a>
	</p>
	<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 p{
	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 p{
	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.php.cn/
 *
 * 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(&#39;.dg-wrapper&#39;);

			this.$items			= this.$wrapper.children();
			this.itemsCount		= this.$items.length;

			this.$nav			= this.$el.find(&#39;nav&#39;);
			this.$navPrev		= this.$nav.find(&#39;.dg-prev&#39;);
			this.$navNext		= this.$nav.find(&#39;.dg-next&#39;);

			// minimum of 3 items
			if( this.itemsCount < 3 ) {

				this.$nav.remove();
				return false;

			}	

			this.current		= this.options.current;

			this.isAnim			= false;

			this.$items.css({
				&#39;opacity&#39;	: 0,
				&#39;visibility&#39;: &#39;hidden&#39;
			});

			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 	= {
					&#39;-webkit-transform&#39;	: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
					&#39;-moz-transform&#39;	: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
					&#39;-o-transform&#39;		: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
					&#39;-ms-transform&#39;		: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
					&#39;transform&#39;			: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;
				};

				rightCSS	= {
					&#39;-webkit-transform&#39;	: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
					&#39;-moz-transform&#39;	: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
					&#39;-o-transform&#39;		: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
					&#39;-ms-transform&#39;		: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
					&#39;transform&#39;			: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;
				};

				leftCSS.opacity		= 1;
				leftCSS.visibility	= &#39;visible&#39;;
				rightCSS.opacity	= 1;
				rightCSS.visibility	= &#39;visible&#39;;

			}
			else if( this.support2d && this.supportTrans ) {

				leftCSS 	= {
					&#39;-webkit-transform&#39;	: &#39;translate(-350px) scale(0.8)&#39;,
					&#39;-moz-transform&#39;	: &#39;translate(-350px) scale(0.8)&#39;,
					&#39;-o-transform&#39;		: &#39;translate(-350px) scale(0.8)&#39;,
					&#39;-ms-transform&#39;		: &#39;translate(-350px) scale(0.8)&#39;,
					&#39;transform&#39;			: &#39;translate(-350px) scale(0.8)&#39;
				};

				rightCSS	= {
					&#39;-webkit-transform&#39;	: &#39;translate(350px) scale(0.8)&#39;,
					&#39;-moz-transform&#39;	: &#39;translate(350px) scale(0.8)&#39;,
					&#39;-o-transform&#39;		: &#39;translate(350px) scale(0.8)&#39;,
					&#39;-ms-transform&#39;		: &#39;translate(350px) scale(0.8)&#39;,
					&#39;transform&#39;			: &#39;translate(350px) scale(0.8)&#39;
				};

				currentCSS	= {
					&#39;z-index&#39;			: 999
				};

				leftCSS.opacity		= 1;
				leftCSS.visibility	= &#39;visible&#39;;
				rightCSS.opacity	= 1;
				rightCSS.visibility	= &#39;visible&#39;;

			}

			this.$leftItm.css( leftCSS || {} );
			this.$rightItm.css( rightCSS || {} );

			this.$currentItm.css( currentCSS || {} ).css({
				&#39;opacity&#39;	: 1,
				&#39;visibility&#39;: &#39;visible&#39;
			}).addClass(&#39;dg-center&#39;);

		},
		_setItems			: function() {

			this.$items.removeClass(&#39;dg-center&#39;);

			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( &#39;z-index&#39;, 1 );
				this.$currentItm.css( &#39;z-index&#39;, 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(&#39;outright&#39;) );

				// previous item
				this.$prevItm		= ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();
				this.$prevItm.css( this._getCoordinates(&#39;outleft&#39;) );

			}

		},
		_loadEvents			: function() {

			var _self	= this;

			this.$navPrev.on( &#39;click.gallery&#39;, function( event ) {

				if( _self.options.autoplay ) {

					clearTimeout( _self.slideshow );
					_self.options.autoplay	= false;

				}

				_self._navigate(&#39;prev&#39;);
				return false;

			});

			this.$navNext.on( &#39;click.gallery&#39;, function( event ) {

				if( _self.options.autoplay ) {

					clearTimeout( _self.slideshow );
					_self.options.autoplay	= false;

				}

				_self._navigate(&#39;next&#39;);
				return false;

			});

			this.$wrapper.on( &#39;webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery&#39;, function( event ) {

				_self.$currentItm.addClass(&#39;dg-center&#39;);
				_self.$items.removeClass(&#39;dg-transition&#39;);
				_self.isAnim	= false;

			});

		},
		_getCoordinates		: function( position ) {

			if( this.support3d && this.supportTrans ) {

				switch( position ) {
					case &#39;outleft&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translateX(-450px) translateZ(-300px) rotateY(45deg)&#39;,
							&#39;-moz-transform&#39;	: &#39;translateX(-450px) translateZ(-300px) rotateY(45deg)&#39;,
							&#39;-o-transform&#39;		: &#39;translateX(-450px) translateZ(-300px) rotateY(45deg)&#39;,
							&#39;-ms-transform&#39;		: &#39;translateX(-450px) translateZ(-300px) rotateY(45deg)&#39;,
							&#39;transform&#39;			: &#39;translateX(-450px) translateZ(-300px) rotateY(45deg)&#39;,
							&#39;opacity&#39;			: 0,
							&#39;visibility&#39;		: &#39;hidden&#39;
						};
						break;
					case &#39;outright&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translateX(450px) translateZ(-300px) rotateY(-45deg)&#39;,
							&#39;-moz-transform&#39;	: &#39;translateX(450px) translateZ(-300px) rotateY(-45deg)&#39;,
							&#39;-o-transform&#39;		: &#39;translateX(450px) translateZ(-300px) rotateY(-45deg)&#39;,
							&#39;-ms-transform&#39;		: &#39;translateX(450px) translateZ(-300px) rotateY(-45deg)&#39;,
							&#39;transform&#39;			: &#39;translateX(450px) translateZ(-300px) rotateY(-45deg)&#39;,
							&#39;opacity&#39;			: 0,
							&#39;visibility&#39;		: &#39;hidden&#39;
						};
						break;
					case &#39;left&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
							&#39;-moz-transform&#39;	: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
							&#39;-o-transform&#39;		: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
							&#39;-ms-transform&#39;		: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
							&#39;transform&#39;			: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
					case &#39;right&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
							&#39;-moz-transform&#39;	: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
							&#39;-o-transform&#39;		: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
							&#39;-ms-transform&#39;		: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
							&#39;transform&#39;			: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
					case &#39;center&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translateX(0px) translateZ(0px) rotateY(0deg)&#39;,
							&#39;-moz-transform&#39;	: &#39;translateX(0px) translateZ(0px) rotateY(0deg)&#39;,
							&#39;-o-transform&#39;		: &#39;translateX(0px) translateZ(0px) rotateY(0deg)&#39;,
							&#39;-ms-transform&#39;		: &#39;translateX(0px) translateZ(0px) rotateY(0deg)&#39;,
							&#39;transform&#39;			: &#39;translateX(0px) translateZ(0px) rotateY(0deg)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
				};

			}
			else if( this.support2d && this.supportTrans ) {

				switch( position ) {
					case &#39;outleft&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translate(-450px) scale(0.7)&#39;,
							&#39;-moz-transform&#39;	: &#39;translate(-450px) scale(0.7)&#39;,
							&#39;-o-transform&#39;		: &#39;translate(-450px) scale(0.7)&#39;,
							&#39;-ms-transform&#39;		: &#39;translate(-450px) scale(0.7)&#39;,
							&#39;transform&#39;			: &#39;translate(-450px) scale(0.7)&#39;,
							&#39;opacity&#39;			: 0,
							&#39;visibility&#39;		: &#39;hidden&#39;
						};
						break;
					case &#39;outright&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translate(450px) scale(0.7)&#39;,
							&#39;-moz-transform&#39;	: &#39;translate(450px) scale(0.7)&#39;,
							&#39;-o-transform&#39;		: &#39;translate(450px) scale(0.7)&#39;,
							&#39;-ms-transform&#39;		: &#39;translate(450px) scale(0.7)&#39;,
							&#39;transform&#39;			: &#39;translate(450px) scale(0.7)&#39;,
							&#39;opacity&#39;			: 0,
							&#39;visibility&#39;		: &#39;hidden&#39;
						};
						break;
					case &#39;left&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translate(-350px) scale(0.8)&#39;,
							&#39;-moz-transform&#39;	: &#39;translate(-350px) scale(0.8)&#39;,
							&#39;-o-transform&#39;		: &#39;translate(-350px) scale(0.8)&#39;,
							&#39;-ms-transform&#39;		: &#39;translate(-350px) scale(0.8)&#39;,
							&#39;transform&#39;			: &#39;translate(-350px) scale(0.8)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
					case &#39;right&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translate(350px) scale(0.8)&#39;,
							&#39;-moz-transform&#39;	: &#39;translate(350px) scale(0.8)&#39;,
							&#39;-o-transform&#39;		: &#39;translate(350px) scale(0.8)&#39;,
							&#39;-ms-transform&#39;		: &#39;translate(350px) scale(0.8)&#39;,
							&#39;transform&#39;			: &#39;translate(350px) scale(0.8)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
					case &#39;center&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translate(0px) scale(1)&#39;,
							&#39;-moz-transform&#39;	: &#39;translate(0px) scale(1)&#39;,
							&#39;-o-transform&#39;		: &#39;translate(0px) scale(1)&#39;,
							&#39;-ms-transform&#39;		: &#39;translate(0px) scale(1)&#39;,
							&#39;transform&#39;			: &#39;translate(0px) scale(1)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
				};

			}
			else {

				switch( position ) {
					case &#39;outleft&#39;	: 
					case &#39;outright&#39;	: 
					case &#39;left&#39;		: 
					case &#39;right&#39;	:
						return {
							&#39;opacity&#39;			: 0,
							&#39;visibility&#39;		: &#39;hidden&#39;
						};
						break;
					case &#39;center&#39;	:
						return {
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
				};

			}

		},
		_navigate			: function( dir ) {

			if( this.supportTrans && this.isAnim )
				return false;

			this.isAnim	= true;

			switch( dir ) {

				case &#39;next&#39; :

					this.current	= this.$rightItm.index();

					// current item moves left
					this.$currentItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;left&#39;) );

					// right item moves to the center
					this.$rightItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;center&#39;) );	

					// next item moves to the right
					if( this.$nextItm ) {

						// left item moves out
						this.$leftItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;outleft&#39;) );

						this.$nextItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;right&#39;) );

					}
					else {

						// left item moves right
						this.$leftItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;right&#39;) );

					}
					break;

				case &#39;prev&#39; :

					this.current	= this.$leftItm.index();

					// current item moves right
					this.$currentItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;right&#39;) );

					// left item moves to the center
					this.$leftItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;center&#39;) );

					// prev item moves to the left
					if( this.$prevItm ) {

						// right item moves out
						this.$rightItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;outright&#39;) );

						this.$prevItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;left&#39;) );

					}
					else {

						// right item moves left
						this.$rightItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;left&#39;) );

					}
					break;	

			};

			this._setItems();

			if( !this.supportTrans )
				this.$currentItm.addClass(&#39;dg-center&#39;);

		},
		_startSlideshow		: function() {

			var _self	= this;

			this.slideshow	= setTimeout( function() {

				_self._navigate( &#39;next&#39; );

				if( _self.options.autoplay ) {

					_self._startSlideshow();

				}

			}, this.options.interval );

		},
		destroy				: function() {

			this.$navPrev.off(&#39;.gallery&#39;);
			this.$navNext.off(&#39;.gallery&#39;);
			this.$wrapper.off(&#39;.gallery&#39;);

		}
	};

	var logError 			= function( message ) {
		if ( this.console ) {
			console.error( message );
		}
	};

	$.fn.gallery			= function( options ) {

		if ( typeof options === &#39;string&#39; ) {

			var args = Array.prototype.slice.call( arguments, 1 );

			this.each(function() {

				var instance = $.data( this, &#39;gallery&#39; );

				if ( !instance ) {
					logError( "cannot call methods on gallery prior to initialization; " +
					"attempted to call method &#39;" + options + "&#39;" );
					return;
				}

				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
					logError( "no such method &#39;" + options + "&#39; for gallery instance" );
					return;
				}

				instance[ options ].apply( instance, args );

			});

		} 
		else {

			this.each(function() {

				var instance = $.data( this, &#39;gallery&#39; );
				if ( !instance ) {
					$.data( this, &#39;gallery&#39;, new $.Gallery( options, this ) );
				}
			});

		}

		return this;

	};

})( jQuery );

 以上就是HTML5实现的震撼3D焦点图动画详解介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：逼真的HTML5树叶飘落动画图文代码详解Artikel seterusnya：用Html5实现简单选择排序算法和演示，附代码

Artikel berkaitan

Lihat lagi