jQuery图片动画遮罩层lightbox特效简单示例

人气：399 时间：2020-07-29

这篇文章主要为大家详细介绍了jQuery图片动画遮罩层lightbox特效简单示例，具有一定的参考价值，可以用来参考一下。

对phpjQuery图片动画遮罩层lightbox特效简单示例感兴趣的小伙伴，下面一起跟随四海网的小编巴闭妹来看看吧！

/**
 * 
 * @param 
 * @arrange (512.笔记) www.q1010.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>

本文来自：http://www.q1010.com/173/10975-0.html

注：关于jQuery图片动画遮罩层lightbox特效简单示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：

您可能感兴趣的文章

上一篇：php function上传图片方法简单示例

下一篇：php再拼接查询的简单示例