首页>>Jquery图片>>jQuery鼠标滑过图片显示遮罩层,可以指定进场位置与效果(2016-04-10)

jQuery鼠标滑过图片显示遮罩层,可以指定进场位置与效果

jQuery鼠标滑过图片显示遮罩层,可以指定进场位置与效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="main">  
  2.         <div class="container">  
  3.   
  4.             <div id="effect-1" class="effects">  
  5.                 <div class="img">  
  6.                     <img src="img/jpg/1.jpg" alt="">  
  7.                     <div class="overlay">  
  8.                         <a href="#" class="expand">+</a>  
  9.                         <!-- <a class="close-overlay hidden">x</a> -->  
  10.                     </div>  
  11.                 </div>  
  12.                   
  13.             </div>  
  14.             <div id="effect-2" class="effects">  
  15.                     <div class="img">  
  16.                         <img src="img/jpg/2.jpg" alt="">  
  17.                         <div class="overlay">  
  18.                             <a href="#" class="expand">+</a>  
  19.                             <a class="close-overlay hidden">x</a>  
  20.                         </div>  
  21.                     </div>  
  22.             </div>  
  23.             <div id="effect-3" class="effects">  
  24.                     <div class="img">  
  25.                         <img src="img/jpg/3.jpg" alt="">  
  26.                         <div class="overlay">  
  27.                             <a href="#" class="expand">+</a>  
  28.                             <a class="close-overlay hidden">x</a>  
  29.                         </div>  
  30.                     </div>  
  31.             </div>  
  32.             <div id="effect-5" class="effects">  
  33.                     <div class="img">  
  34.                         <img src="img/jpg/4.jpg" alt="">  
  35.                         <div class="overlay">  
  36.                             <a href="#" class="expand">+</a>  
  37.                             <a class="close-overlay hidden">x</a>  
  38.                         </div>  
  39.                     </div>  
  40.             </div>  
  41.             <div id="effect-6" class="effects">  
  42.                     <div class="img">  
  43.                         <img src="img/jpg/2.jpg" alt="">  
  44.                         <div class="overlay">  
  45.                             <a href="#" class="expand">+</a>  
  46.                             <a class="close-overlay hidden">x</a>  
  47.                         </div>  
  48.                     </div>  
  49.             </div>  
  50.         </div><!-- /.container -->  
  51.     </div><!-- #main -->  

 


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