jQuery图片动画遮罩层lightbox特效解决办法
内容摘要
这篇文章主要为大家详细介绍了jQuery图片动画遮罩层lightbox特效简单示例,具有一定的参考价值,可以用来参考一下。
对phpjQuery图片动画遮罩层lightbox特效简单示例对此感兴
对phpjQuery图片动画遮罩层lightbox特效简单示例对此感兴
文章正文
这篇文章主要为大家详细介绍了jQuery图片动画遮罩层lightbox特效简单示例,具有一定的参考价值,可以用来参考一下。
对phpjQuery图片动画遮罩层lightbox特效简单示例对此感兴趣的朋友,看看idc笔记做的技术笔记!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | <code class = "language-javascript" > /** * * @param * @arrange (www.idcnote.com) **/ <!DOCTYPE html> <html lang= "zh" > <head> <meta charset= "UTF-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge,chrome=1" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>jQuery图片动画遮罩层lightbox特效</title> <link rel= "stylesheet" href= "css/bootstrap.min.css" > <link rel= "stylesheet" href= "css/font-awesome.min.css" > <link rel= "stylesheet" type= "text/css" href= "css/zzsc.css" > <link rel= "stylesheet" href= "css/magnific-popup.min.css" /> <link rel= "stylesheet" href= "css/style.css" > </head> <body><script src= "/demos/googlegg.js" ></script> <div class = "zzsc-container" > <div class = 'container' > <div class = 'row' > <div class = 'col-xs-12' > <h1 class = 'text-center' > Overlay CSS </h1> <div class = 'padding-top-20px' ></div> </div> </div> </div> <div class = 'container' > <div class = 'row' > <div class = 'col-xs-12 col-sm-6 col-md-6 col-lg-6 magnificPopup__Box' > <a data-effect= 'mfp-zoom-in' href= 'img/1.jpg' > <div class = 'box-1' > <img class = 'img-responsive' src= 'img/thumb_1.jpg' > <div class = 'lupa text-center' > <i class = 'fa fa-search-plus' ></i> </div> </div> </a> </div> <div class = 'col-xs-12 col-sm-6 col-md-6 col-lg-6 magnificPopup__Box' > <a data-effect= 'mfp-3d-flip' href= 'img/2.jpg' > <div class = 'box-2' > <img class = 'img-responsive' src= "img/thumb_2.jpg" > <div class = 'lupa text-center' > <i class = 'fa fa-search-plus' ></i> </div> </div> </a> </div> <div class = 'col-xs-12 col-sm-6 col-md-6 col-lg-6 magnificPopup__Box' > <a data-effect= 'mfp-horizontal-in-out' href= 'img/3.jpg' > <div class = 'box-3' > <img class = 'img-responsive' src= 'img/thumb_3.jpg' > <div class = 'lupa text-center' > <i class = 'fa fa-search-plus' ></i> </div> </div> </a> </div> <div class = 'col-xs-12 col-sm-6 col-md-6 col-lg-6 magnificPopup__Box' > <a data-effect= 'mfp-vertical-topIn-bottomOut' href= 'img/4.jpg' > <div class = 'box-4' > <img class = 'img-responsive' src= 'img/thumb_4.jpg' > <div class = 'lupa text-center' > <i class = 'fa fa-search-plus' ></i> </div> </div> </a> </div> </div> </div> </div> <script src= "js/jquery-1.11.0.min.js" type= "text/javascript" ></script> <script type= "text/javascript" src= "js/jquery.magnific-popup.js" ></script> <script type= "text/javascript" > if (/iP(hone|od|ad)/.test(navigator.platform)) { $( '*' ).css({ "cursor" : "pointer" }); } $( '.preloader' ).delay(3500).fadeOut(600); $(document).ready( function () { $( '.magnificPopup__Box' ).magnificPopup({ delegate: 'a' , type: 'image' , removalDelay: 300, callbacks: { beforeOpen: function () { this.st.image.markup = this.st.image.markup.replace( 'mfp-figure' , 'mfp-figure magnificPopup__Animus' ); this.st.mainClass = this.st.el.attr( 'data-effect' ); } }, closeOnContentClick: true, midClick: true }) }); </script> <div style= "text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';" > <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源:<a href= "http://www.lanrenzhijia.com/" target= "_blank" >懒人素材</a></p> </div> </body> </html></code> |
注:关于jQuery图片动画遮罩层lightbox特效简单示例的内容就先介绍到这里,更多相关文章的可以留意
代码注释