jQuery图片动画遮罩层lightbox特效解决办法
内容摘要
这篇文章主要为大家详细介绍了jQuery图片动画遮罩层lightbox特效简单示例，具有一定的参考价值，可以用来参考一下。
对phpjQuery图片动画遮罩层lightbox特效简单示例对此感兴
对phpjQuery图片动画遮罩层lightbox特效简单示例对此感兴
文章正文
这篇文章主要为大家详细介绍了jQuery图片动画遮罩层lightbox特效简单示例，具有一定的参考价值，可以用来参考一下。
对phpjQuery图片动画遮罩层lightbox特效简单示例对此感兴趣的朋友，看看idc笔记做的技术笔记！
/**
*
* @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>
注：关于jQuery图片动画遮罩层lightbox特效简单示例的内容就先介绍到这里，更多相关文章的可以留意
代码注释
作者：喵哥笔记
