jQuery10种不同动画效果的响应式全屏遮罩层

最新推荐文章于 2021-08-04 09:17:56 发布

weixin_30216561

最新推荐文章于 2021-08-04 09:17:56 发布

阅读量92

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wang1593840378/p/6124076.html

版权

遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层

效果预览

下载地址

实例代码

 
         <div  
         class 
         = 
         "container" 
         > 
        
         <header  
         class 
         = 
         "sucaihuo-header" 
         > 
        
         <h1>全屏遮罩效果</h1> 
        
         <nav  
         class 
         = 
         "sucaihuo-demos" 
         > 
        
         <a  
         class 
         = 
         "current-demo"  
         href= 
         "index.html" 
         >Huge Inc</a> 
        
         <a href= 
         "index2.html" 
         >Corner</a> 
        
         <a href= 
         "index3.html" 
         >Slide down</a> 
        
         <a href= 
         "index5.html" 
         >Scale</a> 
        
         <a href= 
         "index6.html" 
         >Door</a> 
        
         <a href= 
         "index7.html" 
         >Content Push</a><br/> 
        
         <a href= 
         "index8.html" 
         >Content Scale</a> 
        
         <a href= 
         "index9.html" 
         >Corner Shape</a> 
        
         <a href= 
         "index10.html" 
         >Little Boxes</a> 
        
         <a href= 
         "index11.html" 
         >Simple Genie</a> 
        
         <a href= 
         "index12.html" 
         >Genie</a> 
        
         </nav> 
        
         </header> 
        
         <section> 
        
         <p>Overlay fades  
         in  
         and menu rotates slightly  
         in  
         perspective. As seen on <a href= 
         "http://hugeinc.com" 
         >Huge</a></p> 
        
         <p><button id= 
         "trigger-overlay"  
         type= 
         "button" 
         >Open Overlay</button></p> 
        
         </section> 
        
         </div><!-- /container --> 
        
         <!-- open/close --> 
        
         <div  
         class 
         = 
         "overlay overlay-hugeinc" 
         > 
        
         <button type= 
         "button"  
         class 
         = 
         "overlay-close" 
         >Close</button> 
        
         <nav> 
        
         <ul> 
        
         <li><a href= 
         "#" 
         >Home</a></li> 
        
         <li><a href= 
         "#" 
         >jQuery</a></li> 
        
         <li><a href= 
         "#" 
         >Html5</a></li> 
        
         <li><a href= 
         "#" 
         >Css3</a></li> 
        
         <li><a href= 
         "#" 
         >Contact</a></li> 
        
         </ul> 
        
         </nav> 
        
         </div> 
        
         <script src= 
         "js/classie.js" 
         ></script> 
        
         <script src= 
         "js/demo1.js" 
         ></script> 
        
          转载：http://www.cnblogs.com/niuboren/p/6116211.html