コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery と html5_jquery に基づいたクールな 3D フォーカス マップ アニメーションを実装します。

Jquery と html5_jquery に基づいたクールな 3D フォーカス マップ アニメーションを実装します。

WBOY
リリース： 2016-05-16 15:12:40
オリジナル
1538 人が閲覧しました

この HTML5 フォーカス画像は、ボタンをクリックして手動で画像を切り替えるだけでなく、自動画像切り替えもサポートしており、非常に使いやすいです。 Web サイトに製品画像を表示する必要がある場合は、このフォーカス画像プラグインが最適です。

オンライン デモのソース コードのダウンロード

HTML コード

<section id="dg-container" class="dg-container">
 <div class="dg-wrapper">
 <a href="#"><img src="images/1.jpg" alt="Jquery と html5_jquery に基づいたクールな 3D フォーカス マップ アニメーションを実装します。"><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"><</span>
 <span class="dg-next">></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
 * 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 ) &#63; this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );
  this.$rightItm = ( this.current === this.itemsCount - 1 ) &#63; 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 ) &#63; this.$items.eq( 0 ) : this.$rightItm.next();
  this.$nextItm.css( this._getCoordinates('outright') );

  // previous item
  this.$prevItm = ( this.$leftItm.index() === 0 ) &#63; 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 );
ログイン後にコピー

この記事が JavaScript プログラミングを学習するすべての人に役立つことを願っています。

関連ラベル：
3d html5 jquery フォーカスマップ
ソース：php.cn
前の記事：Selectオプションの上下移動を実現するJSメソッド_JavaScriptスキル 次の記事：node-mysql_node.js を使用した Windows Node.js MySQL 環境のセットアップに関するチュートリアル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート