首页>>Jquery图片>>HTML5/CSS3鼠标滑过图片滤镜动画效果,包括灰色变正常，放大图片(2014-07-30)

HTML5/CSS3鼠标滑过图片滤镜动画效果,包括灰色变正常，放大图片

HTML5/CSS3鼠标滑过图片滤镜动画效果,包括灰色变正常，放大图片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.               
  3.             $(function(){  
  4.                 $('.row1').adipoli({  
  5.                     'startEffect' : 'normal',  
  6.                     'hoverEffect' : 'popout'  
  7.                 });  
  8.                 $('.row2').adipoli({  
  9.                     'startEffect' : 'overlay',  
  10.                     'hoverEffect' : 'sliceDown'  
  11.                 });  
  12.                 $('.row3').adipoli({  
  13.                     'startEffect' : 'transparent',  
  14.                     'hoverEffect' : 'boxRandom'  
  15.                 });  
  16.                 $('.row4').adipoli({  
  17.                     'startEffect' : 'overlay',  
  18.                     'hoverEffect' : 'foldLeft'  
  19.                 });  
  20.             $('.row5').adipoli({  
  21.                 'startEffect' : 'transparent',  
  22.                 'hoverEffect' : 'boxRainGrowReverse'  
  23.             });  
  24.             $('.row6').adipoli({  
  25.                 'startEffect' : 'grayscale',  
  26.                 'hoverEffect' : 'normal'  
  27.             });  
  28.             $('#adipoli-download').fadeTo('slow',1);  
  29.         });  
  30.               
  31.         </script>  

 

XML/HTML Code
  1. <div class="effect-container">  
  2.   
  3.                 <img class="img-style row1" src="img/gallery-images/1_1.png"/>  
  4.                 <img class="img-style row1" src="img/gallery-images/1_2.png"/>  
  5.                   
  6.             </div>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_392.html