jquery.stackShuffle/jquery.stackShuffle.js at master · scronide/jquery.stackShuffle · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**
 * jQuery stackShuffle 1.1.0
 * Copyright (c) 2011 Marcus Campbell
 *
 * Dual-licensed under the MIT and GPL Version 2 licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 */
(function($) {
  $.fn.stackShuffle = function(options) {
    var settings = {
      delay: 2000, /* ms */
      left: 100, /* px */
      top: -100, /* px */
      rotation: 10 /* degrees */
    };
    return this.each(function() {
      var $ul = $(this);

      /**
       * Override default settings
       */
      if (options) {
        $.extend(settings, options);
      }

      /**
       * Apply styles
       */
      var container_height = 0;
      var container_width  = 0;
      $("img", this).load(function() {
        if ($(this).height() > container_height) {
          container_height = $(this).height();
          $ul.css({ height: container_height });
        }
        if ($(this).width() > container_width) {
          container_width = $(this).width();
          $ul.css({ width: container_width });
        }
      });
      $ul.css({
        listStyle: "none",
        margin: 0,
        padding: 0,
        position: "relative"
      });
      $("li", this)
        .each(function() {
          $(this).prependTo($(this).parent());
          if (settings.rotation > 0) {
            _rotate(this);
          }
        })
        .css({
          left: 0,
          listStyle: "none",
          listStyleImage: "none",
          position: "absolute",
          top: 0,
          zIndex: 100
        });

      /**
       * Start shuffling
       */
       _shuffle(this);

      function _rotate(target) {
        var deg = Math.floor(Math.random() * (settings.rotation * 2 + 1)) - settings.rotation;

        var supported = false;
        var vendors   = ['', 'Webkit', 'Moz', 'ms', 'O'];
        detectSupport:
          for (var i = 0; i < 5; i++) {
            if (typeof document.body.style[vendors[i] + 'Transform'] != 'undefined') {
              supported  = true;
              var prefix = '';
              if (vendors[i].length) {
                prefix = '-' + vendors[i].toLowerCase() + '-';
              }
              $(target).css(prefix + 'transform', 'rotate(' + deg + 'deg)');
              break detectSupport;
            }
          }
        if (!supported) {
          rad = deg * Math.PI * 2 / 360;
          costheta = Math.cos(rad);
          sintheta = Math.sin(rad);
          m11 = parseFloat(costheta).toFixed(8);
          m12 = parseFloat(-sintheta).toFixed(8);
          m21 = parseFloat(sintheta).toFixed(8);
          m22 = parseFloat(costheta).toFixed(8);
          $(target).css('filter', 'progid:DXImageTransform.Microsoft.Matrix(M11=' + m11 + ', M12=' + m12 + ', M21=' + m21 + ', M22=' + m22 + ', sizingMethod="auto expand"');
        }
      }

      function _shuffle(target) {
        $("li:last", target)
          .animate({ dummy: 1 }, settings.delay)
          .animate({
            left: settings.left,
            top: settings.top
          }, 500, function() {
            $(this).css({
              zIndex: 99
            }).animate({
              left: 0,
              top: 0
            }, 750, function() {
              $(this).prependTo($(this).parent());
              $(this).css({
                zIndex: 100
              });
              _shuffle(target);
            });
          });
      }
    });
  };
})(jQuery);