html语言制作焦点图,HTML5实现的震撼3D焦点图动画的示例代码

2024年1月31日发(作者：)

}.dg-wrapper a{width: 482px;height: 316px;display: block;position: absolute;left: 0;top: 0;background: transparent url(../images/) no-repeat top left;box-shadow: 0px 10px 20px rgba(0,0,0,0.3);}.dg-wrapper -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 -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/) no-repeat top left;}.dg-container nav span:hover{opacity: 1;}.dg-container nav -next{background-position: top right;margin-left: 10px;}## JavaScript代码/*** ** 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 );};$.ts = {current : 0, // index of current itemautoplay : false,// slideshow on / offinterval : 2000 // time between transitions};$.ype = {_init : function( options ) {s = $.extend( true, {}, $.ts, options );// support for 3d / 2d transforms and t3d = nsforms3d;t2d = nsforms;tTrans = nsitions;this.$wrapper = this.$('.dg-wrapper');this.$items = this.$en();ount = this.$;this.$nav = this.$('nav');this.$navPrev = this.$('.dg-prev');this.$navNext = this.$('.dg-next');// minimum of 3 itemsif( ount < 3 ) {this.$();return false;}

t = t; = false;this.$({'opacity' : 0,'visibility': 'hidden'});this._validate();this._layout();// load the eventsthis._loadEvents();// slideshowif( ay ) {this._startSlideshow();}},_validate : function() {if( t < 0 || t > ount - 1 ) {t = 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( t3d && tTrans ) {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)'};y = 1;lity = 'visible';y = 1;lity = 'visible';}else if( t2d && tTrans ) {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};y = 1;lity = 'visible';y = 1;lity = 'visible';

}this.$( leftCSS || {} );this.$( rightCSS || {} );this.$( currentCSS || {} ).css({'opacity' : 1,'visibility': 'visible'}).addClass('dg-center');},_setItems : function() {this.$Class('dg-center');this.$currentItm = this.$( t );this.$leftItm = ( t === 0 ) ? this.$( ount - 1 ) : this.$( t - 1 );this.$rightItm = ( t === ount - 1 ) ? this.$( 0 ) : this.$( t + 1 );if( !t3d && t2d && tTrans ) {this.$( 'z-index', 1 );this.$( 'z-index', 999 );}// next & previous itemsif( ount > 3 ) {// next itemthis.$nextItm = ( this.$() === ount - 1 ) ? this.$( 0 ) : this.$();this.$( this._getCoordinates('outright') );// previous itemthis.$prevItm = ( this.$() === 0 ) ? this.$( ount - 1 ) : this.$();this.$( this._getCoordinates('outleft') );}},_loadEvents : function() {var _self = this;this.$( 'y', function( event ) {if( _ay ) {clearTimeout( _how );_ay = false;}

_self._navigate('prev');return false;});this.$( 'y', function( event ) {if( _ay ) {clearTimeout( _how );_ay = false;}_self._navigate('next');return false;});this.$( 'y y y', function( event ) {_self.$ss('dg-center');_self.$Class('dg-transition');_ = false;});},_getCoordinates : function( position ) {if( t3d && tTrans ) {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( t2d && tTrans ) {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( tTrans && )return false; = true;switch( dir ) {case 'next' :t = this.$();// current item moves leftthis.$ss('dg-transition').css( this._getCoordinates('left') );// right item moves to the centerthis.$ss('dg-transition').css( this._getCoordinates('center') );// next item moves to the rightif( this.$nextItm ) {// left item moves out

this.$ss('dg-transition').css( this._getCoordinates('outleft') );this.$ss('dg-transition').css( this._getCoordinates('right') );}else {// left item moves rightthis.$ss('dg-transition').css( this._getCoordinates('right') );}break;case 'prev' :t = this.$();// current item moves rightthis.$ss('dg-transition').css( this._getCoordinates('right') );// left item moves to the centerthis.$ss('dg-transition').css( this._getCoordinates('center') );// prev item moves to the leftif( this.$prevItm ) {// right item moves outthis.$ss('dg-transition').css( this._getCoordinates('outright') );this.$ss('dg-transition').css( this._getCoordinates('left') );}else {// right item moves leftthis.$ss('dg-transition').css( this._getCoordinates('left') );}break;};this._setItems();if( !tTrans )this.$ss('dg-center');},_startSlideshow : function() {var _self = this;how = setTimeout( function() {_self._navigate( 'next' );

if( _ay ) {_self._startSlideshow();}}, al );},destroy : function() {this.$('.gallery');this.$('.gallery');this.$('.gallery');}};var logError = function( message ) {if ( e ) {( message );}};$.y = function( options ) {if ( typeof options === 'string' ) {var args = ( arguments, 1 );(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] ) || (0) === "_" ) {logError( "no such method '" + options + "' for gallery instance" );return;}instance[ options ].apply( instance, args );});}else {