<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
<title>baguetteBox图片弹出层插件</title>
<link rel="stylesheet" href="baguetteBox.css">
<style>
.baguetteBox { margin: 0 auto; font-size: 0;}
.baguetteBox img { display: inline-block; width: 48%; padding:1%;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="baguetteBox.js"></script>
<script>
$(function(){
baguetteBox.run('.baguetteBox', {
animation: 'fadeIn'
});
});
</script>
</head>
<body>
<div class="main">
<div class="mianc">
<h1>默认</h1>
<!-- Demo start -->
<div class="baguetteBox">
<a href="original/1.jpg" data-caption="Golden Gate Bridge"><img src="original/1.jpg"></a>
<a href="original/2.jpg" title="Midnight City" data-caption="Golden Gate Bridge"><img src="original/2.jpg"></a>
<a href="original/3.jpg" data-caption="Golden Gate Bridge"><img src="original/3.jpg"></a>
<a href="original/4.jpg" data-caption="Golden Gate Bridge"><img src="original/4.jpg"></a>
<a href="original/5.jpg"><img src="original/5.jpg"></a>
<a href="original/6.jpg"><img src="original/6.jpg"></a>
<a href="original/7.jpg"><img src="original/7.jpg"></a>
<a href="original/8.jpg"><img src="original/8.jpg"></a>
</div>
<!-- Demo end -->
</div>
</div>
</body>
</html>
图片弹出大图html+js_html5
版权申诉
146 浏览量
2022-09-23
22:19:16
上传
评论
收藏 851KB ZIP 举报
图片弹出大图html+js.zip （14个子文件） 
图片弹出大图 
baguetteBox.css 4KB baguetteBox.js 15KB
index.html 2KB original 
8.jpg 132KB 2.jpg 88KB 1.jpg 47KB 6.jpg 67KB 3.jpg 48KB 5.jpg 77KB 11.jpg 69KB 4.jpg 99KB 10.jpg 106KB 9.jpg 94KB 7.jpg 53KB资源评论
