手记

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程
继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

一只名叫tom的猫 2018-05-27 23:26:51 浏览 3433
一只名叫tom的猫
关注TA
已关注
手记 474
粉丝 62
获赞 330

这是一款基于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 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.$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 left
					this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );					// right item moves to the center
					this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') );	

					// next item moves to the right
					if( this.$nextItm ) {						// left item moves out
						this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );						this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );

					}					else {						// left item moves right
						this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );

					}					break;				case 'prev' :					this.current	= this.$leftItm.index();					// current item moves right
					this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );					// left item moves to the center
					this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );					// prev item moves to the left
					if( this.$prevItm ) {						// right item moves out
						this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );						this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );

					}					else {						// right item moves left
						this.$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 );

在线演示源码下载

本文链接：http://www.codeceo.com/article/html5-3d-image-slider.html
本文作者：码农网 – 小峰

打开App，阅读手记
相关标签
Html5
JavaScript
CSS3
0人推荐
发表评论
随时随地看视频慕课网APP

相关课程

Spring Boot+Vue3前后端分离，实战wiki知识库系统

¥299 中级 2478

基于Vue3新标准，打造后台综合解决方案

¥458 高级 1926

Java支付全家桶 企业级各类支付手段一站式解决方案

¥388 初级 745

H5+JS+CSS3 实现圣诞情缘

免费 中级 121929

HTML5+CSS3实现春节贺卡

免费 中级 110031

相关阅读

HTML5 Canvas 破碎重组的视频特效
HTML5 3D书本翻页动画
HTML5 3D衣服摇摆动画特效
CSS3背景 醒目而惊艳的滚动效果
后端自动构建前端css和js