JavaScript + Ajax 実践サンプル集 - jQueryのElementStackプラグインでイメージを重ねる

jQueryのElementStackプラグインでイメージを重ねる

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのElementStackプラグインを利用して複数のイメージを重ねて表示します。サンプルに９個のイメージが表示されたら任意のイメージをクリックしてください。するとクリックしたイメージの背後に他のイメージが重なります。この状態で再度前面のイメージをクリックすると元の位置に戻ります。

このサンプルを編集して試してみる

$('#wrapper').elementStacks({
  'transaction': 'easeOutBack'
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - ElementStack Plugin </title>
  <link href="jQuery/elementStack/style.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
  <script src="jQuery/elementStack/ElementStack.js" type="text/javascript"></script>
  <script type="text/javascript">
    /*
    *    Easing Plugin (http://gsgd.co.uk/sandbox/jquery/easing/)
    *    NOT required but recommended.
    */

jQuery.extend(jQuery.easing, {
      easeOutBack: function(x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
      }
    });

$(function() {
      $('#wrapper').elementStacks({
        'transaction': 'easeOutBack'
      });
    });
 
  </script>
</head>
<body>
  Click on one of the images ...
  <div id="wrapper">
    <img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_m.jpg" />
    <img width="75" height="75" src="http://farm3.static.flickr.com/2305/2464064429_2310ab60b2_m.jpg" />
    <img width="75" height="75" src="http://farm3.static.flickr.com/2143/2769889963_7d51ce2702_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/251/459884041_92ae9dcc0f_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/214/459884021_17921233c5_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/191/459792641_2771d6afa0_m.jpg" />
    <img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_s.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" />
  </div>
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/*
 * jquery.elementStacks.
 * Stacks elements/images on top of each other with a funky transition.
 *
 * Jquery version of http://mootools.net/forge/p/elementstack
 * by Oskar Krawczyk (http://nouincolor.com).
 *
 * Copyright (c) 2010 Marco Fucci
 * http://www.marcofucci.com
 * 
 * Requires: jQuery 1.2.3+
 *
 * Licensed under MIT
 * http://www.opensource.org/licenses/mit-license.php
 */
(function($) {
    $.fn.elementStacks = function(options) {
        var opts = $.extend({}, $.fn.elementStacks.defaults, options);

        return this.each(function() {
            var pos, collapsed = false, stackItems = $(opts.itemsSelector, this).css({'z-index': 10});

            stackItems
                .each(function(index, img) {
                    $(img)
                        .attr('coords', this.offsetTop + ':' + this.offsetLeft)
                        .css({'top' : this.offsetTop, 'left' : this.offsetLeft });
                })
                .css({'position': 'absolute'})
                .click(function(e) {
                    var $this = $(this);
                    
                    if (!$this.attr('coords')) {
                        return;
                    };
                    
                    collapsed = !collapsed;
                    var target = (collapsed) ? $this.css({'z-index': 100}) : null;
                    $this.one('stackfinished', function() {
                        if (!target) {
                            stackItems.css({'z-index': 10});
                        }
                    });
                    stackItems.each(function(index, stackItem) {
                        setTimeout(function() {
                            $.fn.elementStacks.reStack.call($this, $(stackItem), collapsed, opts, target, index, index == stackItems.length -1);
                        }, opts.delay * index);
                    });
                });
        });
    };
    
    $.fn.elementStacks.defaults = {
        'itemsSelector': 'img',
        'rotationDeg': 20,
        'delay': 40,
        'duration': 900,
        'transaction': 'swing'
    };
    
    $.fn.elementStacks.random = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    };
    
    $.fn.elementStacks.reStack = function(stackItem, collapsing, options, target, index, last) {
        var coords = (target ? target : stackItem).attr('coords').split(':');
        var rand = (collapsing ? $.fn.elementStacks.random(-options.rotationDeg, options.rotationDeg) : 0);
    
        var $that = this;
        stackItem.css({
            '-webkit-transform': 'rotate(' + rand + 'deg)',
            '-moz-transform': 'rotate(' + rand + 'deg)'
        }).animate({
                top: parseInt(coords[0]) + rand,
                left: parseInt(coords[1]) + rand
            }, options.duration,
            options.transaction,
           function() {
               if (last) {
                   $that.trigger('stackfinished');
               }
           }
        );
    };
})(jQuery);

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
body
{
  background-color: #000;
  font-family: "Georgia" , "Times New Roman" , serif;
  font-size: .8em;
  color: #fff;
  text-align: center;
  text-shadow: 0 -1px 0 #000;
}

h1
{
  font-size: 1.7em;
  line-height: 150%;
}

#wrapper
{
  position: relative;
  height: 320px;
  width: 280px;
  margin: 15px auto;
}

img
{
  position: relative;
  float: left;
  padding: 0;
  margin: 5px;
  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow: 0 0 5px #000;
  border: solid 2px #FFFAF2;
  border-bottom: solid 15px #FFFAF2;
  -webkit-transition: -webkit-transform 0.20s ease-in-out;
  -moz-transition: -moz-transform 0.20s ease-in-out;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="jQuery/elementStack/style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jQuery/elementStack/ElementStack.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
  *    Easing Plugin (http://gsgd.co.uk/sandbox/jquery/easing/)
  *    NOT required but recommended.
  */

  jQuery.extend(jQuery.easing, {
    easeOutBack: function(x, t, b, c, d, s) {
      if (s == undefined) s = 1.70158;
      return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    }
  });

  $(function() {
    $('#wrapper').elementStacks({
      'transaction': 'easeOutBack'
    });
  });

</script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  Click on one of the images ...
  <div id="wrapper">
    <img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_m.jpg" />
    <img width="75" height="75" src="http://farm3.static.flickr.com/2305/2464064429_2310ab60b2_m.jpg" />
    <img width="75" height="75" src="http://farm3.static.flickr.com/2143/2769889963_7d51ce2702_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/251/459884041_92ae9dcc0f_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/214/459884021_17921233c5_m.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/191/459792641_2771d6afa0_m.jpg" />
    <img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_s.jpg" />
    <img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" />
  </div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのElementStackプラグインでイメージを重ねる

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのElementStackプラグインでイメージを重ねる

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!