jquery.reflection.js 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /*!
  2. reflection.js for jQuery v1.12
  3. (c) 2006-2013 Christophe Beyls <http://www.digitalia.be>
  4. MIT-style license.
  5. */
  6. ;(function($) {
  7. $.fn.reflect = function(options) {
  8. options = $.extend({
  9. height: 1/3,
  10. opacity: 0.5
  11. }, options);
  12. return this.unreflect().each(function() {
  13. var img = this;
  14. if (/^img$/i.test(img.tagName)) {
  15. function doReflect() {
  16. var imageWidth = img.width, imageHeight = img.height, reflection, reflectionHeight, wrapper, context, gradient;
  17. reflectionHeight = Math.floor((options.height > 1) ? Math.min(imageHeight, options.height) : imageHeight * options.height);
  18. reflection = $("<canvas />")[0];
  19. if (reflection.getContext) {
  20. context = reflection.getContext("2d");
  21. try {
  22. $(reflection).attr({width: imageWidth, height: reflectionHeight});
  23. context.save();
  24. context.translate(0, imageHeight-1);
  25. context.scale(1, -1);
  26. context.drawImage(img, 0, 0, imageWidth, imageHeight);
  27. context.restore();
  28. context.globalCompositeOperation = "destination-out";
  29. gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
  30. gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options.opacity) + ")");
  31. gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
  32. context.fillStyle = gradient;
  33. context.rect(0, 0, imageWidth, reflectionHeight);
  34. context.fill();
  35. } catch(e) {
  36. return;
  37. }
  38. } else {
  39. if (!window.ActiveXObject) return;
  40. reflection = $("<img />").attr("src", img.src).css({
  41. width: imageWidth,
  42. height: imageHeight,
  43. marginBottom: reflectionHeight - imageHeight,
  44. filter: "FlipV progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (options.opacity * 100) + ", FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=" + (reflectionHeight / imageHeight * 100) + ")"
  45. })[0];
  46. }
  47. $(reflection).css({display: "block", border: 0});
  48. wrapper = $(/^a$/i.test(img.parentNode.tagName) ? "<span />" : "<div />").insertAfter(img).append([img, reflection])[0];
  49. wrapper.className = img.className;
  50. $(img).data("reflected", wrapper.style.cssText = img.style.cssText);
  51. $(wrapper).css({width: imageWidth, height: imageHeight + reflectionHeight, overflow: "hidden"});
  52. img.style.cssText = "display: block; border: 0px";
  53. img.className = "reflected";
  54. }
  55. if (img.complete) doReflect();
  56. else $(img).load(doReflect);
  57. }
  58. });
  59. }
  60. $.fn.unreflect = function() {
  61. return this.unbind("load").each(function() {
  62. var img = this, reflected = $(this).data("reflected"), wrapper;
  63. if (reflected !== undefined) {
  64. wrapper = img.parentNode;
  65. img.className = wrapper.className;
  66. img.style.cssText = reflected;
  67. $(img).data("reflected", null);
  68. wrapper.parentNode.replaceChild(img, wrapper);
  69. }
  70. });
  71. }
  72. })(window.jQuery || window.Zepto);