Image Reflection with jQuery and MooTools Example实现图片半透明渐变倒影效果

from: http://davidwalsh.name/dw-content/mootools-reflection.php

http://www.digitalia.be/software/reflectionjs-for-jquery

 http://cow.neondragon.net/stuff/reflection/

 1 /*!
 2     reflection.js for jQuery v1.03
 3     (c) 2006-2009 Christophe Beyls <http://www.digitalia.be>
 4     MIT-style license.
 5 */
 6 
 7 (function($) {
 8 
 9 $.fn.extend({
10     reflect: function(options) {
11         options = $.extend({
12             height: 1/3,
13             opacity: 0.5
14         }, options);
15 
16         return this.unreflect().each(function() {
17             var img = this;
18             if (/^img$/i.test(img.tagName)) {
19                 function doReflect() {
20                     var imageWidth = img.width, imageHeight = img.height, reflection, reflectionHeight, wrapper, context, gradient;
21                     reflectionHeight = Math.floor((options.height > 1) ? Math.min(imageHeight, options.height) : imageHeight * options.height);
22 
23                     if ($.browser.msie) {
24                         reflection = $("<img />").attr("src", img.src).css({
25                             width: imageWidth,
26                             height: imageHeight,
27                             marginBottom: reflectionHeight - imageHeight,
28                             filter: "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (options.opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflectionHeight / imageHeight * 100) + ")"
29                         })[0];
30                     } else {
31                         reflection = $("<canvas />")[0];
32                         if (!reflection.getContext) return;
33                         context = reflection.getContext("2d");
34                         try {
35                             $(reflection).attr({width: imageWidth, height: reflectionHeight});
36                             context.save();
37                             context.translate(0, imageHeight-1);
38                             context.scale(1, -1);
39                             context.drawImage(img, 0, 0, imageWidth, imageHeight);
40                             context.restore();
41                             context.globalCompositeOperation = "destination-out";
42 
43                             gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
44                             gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options.opacity) + ")");
45                             gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
46                             context.fillStyle = gradient;
47                             context.rect(0, 0, imageWidth, reflectionHeight);
48                             context.fill();
49                         } catch(e) {
50                             return;
51                         }
52                     }
53                     $(reflection).css({display: "block", border: 0});
54 
55                     wrapper = $(/^a$/i.test(img.parentNode.tagName) ? "<span />" : "<div />").insertAfter(img).append([img, reflection])[0];
56                     wrapper.className = img.className;
57                     $.data(img, "reflected", wrapper.style.cssText = img.style.cssText);
58                     $(wrapper).css({width: imageWidth, height: imageHeight + reflectionHeight, overflow: "hidden"});
59                     img.style.cssText = "display: block; border: 0px";
60                     img.className = "reflected";
61                 }
62 
63                 if (img.complete) doReflect();
64                 else $(img).load(doReflect);
65             }
66         });
67     },
68 
69     unreflect: function() {
70         return this.unbind("load").each(function() {
71             var img = this, reflected = $.data(this, "reflected"), wrapper;
72 
73             if (reflected !== undefined) {
74                 wrapper = img.parentNode;
75                 img.className = wrapper.className;
76                 img.style.cssText = reflected;
77                 $.removeData(img, "reflected");
78                 wrapper.parentNode.replaceChild(img, wrapper);
79             }
80         });
81     }
82 });
83 
84 })(jQuery); 
代码 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4 <head>
 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 6 <title>jQuery reflection 实现图片半透明渐变倒影效果</title>
 7 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
 8 <script type="text/javascript" src="reflection.js"></script>
 9 <script type="text/javascript">
10 $(document).ready(function(){
11     $(".reflection img").reflect({ height:.5, opacity:.5 });
12 });
13 </script>
14 </head>
15 
16 <body>
17 <div class="reflection">
18     <img src="logo_cn.png" alt="" />
19 </div>
20 
21 </body>
22 
23 </html>
24  
代码 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4 <head>
 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 6 <title>Image Reflection with jQuery and MooTools Example</title>
 7     <meta name="description" content="Reflection.js is a javascript utility available in both jQuery and MooTools that creates reflections for any images in a page.  Reflection.js creates a new IMG element with special filters if the client is using IE -- if the client is not IE, Reflection.js creates a CANVAS element and constructs the reflection within the canvas." />
 8     
 9 <style type="text/css">
10 
11     /*  all media  */
12     @media all
13     {
14         /* global */
15         *                             { margin:0; padding:0; } html { overflow-y:scroll; }
16         body                        { font-family:'lucida grande',tahoma,verdana,arial,sans-serif; font-size:62.5%; color:#222; }
17 
18         /* links */
19         a                                { color:#3b5998; }
20         a:link, a:visited            { text-decoration:underline; }
21         a:hover, a:active            { text-decoration:none; }
22         a img                            { border:0; }
23         
24     }
25     
26     
27 </style>
28 <script type="text/javascript">
29 window.onload = function() {
30     var paras = document.getElementById('content').getElementsByTagName('p');
31     if(paras.length) {
32         paras[0].className = paras[0].className + ' intro';
33     }
34 };
35 </script>    <style type="text/css">
36         
37     </style>
38     <script type="text/javascript" src="mootools.1.2.3.js"></script>
39     <script type="text/javascript" src="reflection1.js"></script>
40     <script type="text/javascript">
41         window.addEvent('domready',function() {
42             $$('img.reflect').each(function(img) {
43                 img.reflect();
44             });
45         });
46     </script>
47 </head>
48 <body>
49         <!-- HEADER -->
50         <div id="header"><div class="center relative">
51             <a href="/" id="header-logo">David Walsh Blog</a>
52             <div id="header-title"><a href="/">David Walsh Blog</a></div>
53         </div></div>
54 
55 
56 <div id="content"><div class="center">
57     
58     <div id="content-left">
59         <h1 style="margin-top:20px;">Image Reflection with jQuery and MooTools Example</h1>    
60     <p>Check out the image reflection below.  The reflection is done completely by MooTools!  There is also a jQuery version.</p>
61     
62     <img src="http://davidwalsh.name/dw-content/cricci-player.jpg" alt="Christina Ricci" class="reflect" />
63     
64     
65     
66     
67 </div>
68 <div id="content-right">
69             <div id="bsap_1236348" class="bsarocks bsap_db3b221ddd8cbba67739ae3837520ffe"></div>
70     </div>
71 
72 
73 <div class="clear"></div>
74 </div></div>
75 
76 
77 </body>
78 </html>
79