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/

reflection.js代码

 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