https://tscn.com.cn/img/j_animated.js

1// JavaScript Document
2
3
4//懒加载动画
5(function() {
6  var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX,
7    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
8    indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
9
10  Util = (function() {
11    function Util() {}
12
13    Util.prototype.extend = function(custom, defaults) {
14      var key, value;
15      for (key in defaults) {
16        value = defaults[key];
17        if (custom[key] == null) {
18          custom[key] = value;
19        }
20      }
21      return custom;
22    };
23
24    Util.prototype.isMobile = function(agent) {
25      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
26    };
27
28    Util.prototype.createEvent = function(event, bubble, cancel, detail) {
29      var customEvent;
30      if (bubble == null) {
31        bubble = false;
32      }
33      if (cancel == null) {
34        cancel = false;
35      }
36      if (detail == null) {
37        detail = null;
38      }
39      if (document.createEvent != null) {
40        customEvent = document.createEvent('CustomEvent');
41        customEvent.initCustomEvent(event, bubble, cancel, detail);
42      } else if (document.createEventObject != null) {
43        customEvent = document.createEventObject();
44        customEvent.eventType = event;
45      } else {
46        customEvent.eventName = event;
47      }
48      return customEvent;
49    };
50
51    Util.prototype.emitEvent = function(elem, event) {
52      if (elem.dispatchEvent != null) {
53        return elem.dispatchEvent(event);
54      } else if (event in (elem != null)) {
55        return elem[event]();
56      } else if (("on" + event) in (elem != null)) {
57        return elem["on" + event]();
58      }
59    };
60
61    Util.prototype.addEvent = function(elem, event, fn) {
62      if (elem.addEventListener != null) {
63        return elem.addEventListener(event, fn, false);
64      } else if (elem.attachEvent != null) {
65        return elem.attachEvent("on" + event, fn);
66      } else {
67        return elem[event] = fn;
68      }
69    };
70
71    Util.prototype.removeEvent = function(elem, event, fn) {
72      if (elem.removeEventListener != null) {
73        return elem.removeEventListener(event, fn, false);
74      } else if (elem.detachEvent != null) {
75        return elem.detachEvent("on" + event, fn);
76      } else {
77        return delete elem[event];
78      }
79    };
80
81    Util.prototype.innerHeight = function() {
82      if ('innerHeight' in window) {
83        return window.innerHeight;
84      } else {
85        return document.documentElement.clientHeight;
86      }
87    };
88
89    return Util;
90
91  })();
92
93  WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() {
94    function WeakMap() {
95      this.keys = [];
96      this.values = [];
97    }
98
99    WeakMap.prototype.get = function(key) {
100      var i, item, j, len, ref;
101      ref = this.keys;
102      for (i = j = 0, len = ref.length; j < len; i = ++j) {
103        item = ref[i];
104        if (item === key) {
105          return this.values[i];
106        }
107      }
108    };
109
110    WeakMap.prototype.set = function(key, value) {
111      var i, item, j, len, ref;
112      ref = this.keys;
113      for (i = j = 0, len = ref.length; j < len; i = ++j) {
114        item = ref[i];
115        if (item === key) {
116          this.values[i] = value;
117          return;
118        }
119      }
120      this.keys.push(key);
121      return this.values.push(value);
122    };
123
124    return WeakMap;
125
126  })());
127
128  MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() {
129    function MutationObserver() {
130      if (typeof console !== "undefined" && console !== null) {
131        console.warn('MutationObserver is not supported by your browser.');
132      }
133      if (typeof console !== "undefined" && console !== null) {
134        console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
135      }
136    }
137
138    MutationObserver.notSupported = true;
139
140    MutationObserver.prototype.observe = function() {};
141
142    return MutationObserver;
143
144  })());
145
146  getComputedStyle = this.getComputedStyle || function(el, pseudo) {
147    this.getPropertyValue = function(prop) {
148      var ref;
149      if (prop === 'float') {
150        prop = 'styleFloat';
151      }
152      if (getComputedStyleRX.test(prop)) {
153        prop.replace(getComputedStyleRX, function(_, _char) {
154          return _char.toUpperCase();
155        });
156      }
157      return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null;
158    };
159    return this;
160  };
161
162  getComputedStyleRX = /(\-([a-z]){1})/g;
163
164  this.WOW = (function() {
165    WOW.prototype.defaults = {
166      boxClass: 'wow',
167      animateClass: 'animated',
168      offset: 0,
169      mobile: true,
170      live: true,
171      callback: null
172    };
173
174    function WOW(options) {
175      if (options == null) {
176        options = {};
177      }
178      this.scrollCallback = bind(this.scrollCallback, this);
179      this.scrollHandler = bind(this.scrollHandler, this);
180      this.resetAnimation = bind(this.resetAnimation, this);
181      this.start = bind(this.start, this);
182      this.scrolled = true;
183      this.config = this.util().extend(options, this.defaults);
184      this.animationNameCache = new WeakMap();
185      this.wowEvent = this.util().createEvent(this.config.boxClass);
186    }
187
188    WOW.prototype.init = function() {
189      var ref;
190      this.element = window.document.documentElement;
191      if ((ref = document.readyState) === "interactive" || ref === "complete") {
192        this.start();
193      } else {
194        this.util().addEvent(document, 'DOMContentLoaded', this.start);
195      }
196      return this.finished = [];
197    };
198
199    WOW.prototype.start = function() {
200      var box, j, len, ref;
201      this.stopped = false;
202      this.boxes = (function() {
203        var j, len, ref, results;
204        ref = this.element.querySelectorAll("." + this.config.boxClass);
205        results = [];
206        for (j = 0, len = ref.length; j < len; j++) {
207          box = ref[j];
208          results.push(box);
209        }
210        return results;
211      }).call(this);
212      this.all = (function() {
213        var j, len, ref, results;
214        ref = this.boxes;
215        results = [];
216        for (j = 0, len = ref.length; j < len; j++) {
217          box = ref[j];
218          results.push(box);
219        }
220        return results;
221      }).call(this);
222      if (this.boxes.length) {
223        if (this.disabled()) {
224          this.resetStyle();
225        } else {
226          ref = this.boxes;
227          for (j = 0, len = ref.length; j < len; j++) {
228            box = ref[j];
229            this.applyStyle(box, true);
230          }
231        }
232      }
233      if (!this.disabled()) {
234        this.util().addEvent(window, 'scroll', this.scrollHandler);
235        this.util().addEvent(window, 'resize', this.scrollHandler);
236        this.interval = setInterval(this.scrollCallback, 50);
237      }
238      if (this.config.live) {
239        return new MutationObserver((function(_this) {
240          return function(records) {
241            var k, len1, node, record, results;
242            results = [];
243            for (k = 0, len1 = records.length; k < len1; k++) {
244              record = records[k];
245              results.push((function() {
246                var l, len2, ref1, results1;
247                ref1 = record.addedNodes || [];
248                results1 = [];
249                for (l = 0, len2 = ref1.length; l < len2; l++) {
250                  node = ref1[l];
251                  results1.push(this.doSync(node));
252                }
253                return results1;
254              }).call(_this));
255            }
256            return results;
257          };
258        })(this)).observe(document.body, {
259          childList: true,
260          subtree: true
261        });
262      }
263    };
264
265    WOW.prototype.stop = function() {
266      this.stopped = true;
267      this.util().removeEvent(window, 'scroll', this.scrollHandler);
268      this.util().removeEvent(window, 'resize', this.scrollHandler);
269      if (this.interval != null) {
270        return clearInterval(this.interval);
271      }
272    };
273
274    WOW.prototype.sync = function(element) {
275      if (MutationObserver.notSupported) {
276        return this.doSync(this.element);
277      }
278    };
279
280    WOW.prototype.doSync = function(element) {
281      var box, j, len, ref, results;
282      if (element == null) {
283        element = this.element;
284      }
285      if (element.nodeType !== 1) {
286        return;
287      }
288      element = element.parentNode || element;
289      ref = element.querySelectorAll("." + this.config.boxClass);
290      results = [];
291      for (j = 0, len = ref.length; j < len; j++) {
292        box = ref[j];
293        if (indexOf.call(this.all, box) < 0) {
294          this.boxes.push(box);
295          this.all.push(box);
296          if (this.stopped || this.disabled()) {
297            this.resetStyle();
298          } else {
299            this.applyStyle(box, true);
300          }
301          results.push(this.scrolled = true);
302        } else {
303          results.push(void 0);
304        }
305      }
306      return results;
307    };
308
309    WOW.prototype.show = function(box) {
310      this.applyStyle(box);
311      box.className = box.className + " " + this.config.animateClass;
312      if (this.config.callback != null) {
313        this.config.callback(box);
314      }
315      this.util().emitEvent(box, this.wowEvent);
316      this.util().addEvent(box, 'animationend', this.resetAnimation);
317      this.util().addEvent(box, 'oanimationend', this.resetAnimation);
318      this.util().addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
319      this.util().addEvent(box, 'MSAnimationEnd', this.resetAnimation);
320      return box;
321    };
322
323    WOW.prototype.applyStyle = function(box, hidden) {
324      var delay, duration, iteration;
325      duration = box.getAttribute('data-wow-duration');
326      delay = box.getAttribute('data-wow-delay');
327      iteration = box.getAttribute('data-wow-iteration');
328      return this.animate((function(_this) {
329        return function() {
330          return _this.customStyle(box, hidden, duration, delay, iteration);
331        };
332      })(this));
333    };
334
335    WOW.prototype.animate = (function() {
336      if ('requestAnimationFrame' in window) {
337        return function(callback) {
338          return window.requestAnimationFrame(callback);
339        };
340      } else {
341        return function(callback) {
342          return callback();
343        };
344      }
345    })();
346
347    WOW.prototype.resetStyle = function() {
348      var box, j, len, ref, results;
349      ref = this.boxes;
350      results = [];
351      for (j = 0, len = ref.length; j < len; j++) {
352        box = ref[j];
353        results.push(box.style.visibility = 'visible');
354      }
355      return results;
356    };
357
358    WOW.prototype.resetAnimation = function(event) {
359      var target;
360      if (event.type.toLowerCase().indexOf('animationend') >= 0) {
361        target = event.target || event.srcElement;
362        return target.className = target.className.replace(this.config.animateClass, '').trim();
363      }
364    };
365
366    WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
367      if (hidden) {
368        this.cacheAnimationName(box);
369      }
370      box.style.visibility = hidden ? 'hidden' : 'visible';
371      if (duration) {
372        this.vendorSet(box.style, {
373          animationDuration: duration
374        });
375      }
376      if (delay) {
377        this.vendorSet(box.style, {
378          animationDelay: delay
379        });
380      }
381      if (iteration) {
382        this.vendorSet(box.style, {
383          animationIterationCount: iteration
384        });
385      }
386      this.vendorSet(box.style, {
387        animationName: hidden ? 'none' : this.cachedAnimationName(box)
388      });
389      return box;
390    };
391