会python真的可以为所欲为0(回)
355天前
这里还有人吗1(回)
540天前这里还有人吗0(回)
540天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
765天前到处都是羊，不想上班0(回)
845天前
鸽子
0(回)
849天前
jQuery图片动画遮罩层lightbox特效.zip(免费下载)[3 次下载]<!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特效.zip(免费下载)[3 次下载]
by: 发表于：2017-10-16 17:25:17 顶(0) | 踩(0) 回复
??
回复评论