本帖最后由 gz_xudada 于 2018-10-20 00:10 编辑
1. baguettebox.js简介使用baguettebox相册全屏弹窗显示插件，使用起来非常的简单。 它的功能: 可以实现相册全屏弹窗显示。 可以把显示图片变为响应式的图片显示。 切换模式有2种，第一种是默认模式，从右向左滑动过去切换，第二种是淡入淡出的切换效果。
2. 下载baguettebox.js
可以百度baguettebox.js来下载js与css文件
解压压缩包得到文件夹 打开dist目录,就可以看到我们需要用到的js和css文件了
3. 准备图片素材
4. 书写HTML结构我们需要在html中引入相应图片信息，这里img标签src设置的路径为缩略图，a链接的href属性设置的就是点击之后全屏弹出大图。 5. 使用CSS对页面整体简单的布局6. 引入baguettebox.min.css样式7. 通过cdn引入jquery注意:cdn引入的话,需要连接网络;并且引入jquery.js需要在baguettebox引入之前 8. 引入baguettebox.min.js
file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wpsACD3.tmp.jpg 9. 预览页面
10. 编写js代码，使用baguettebox插件 10.1. 用法1 : 默认从右向左滑动过去切换图片点击某个缩略图片以后的预览效果: 左右按钮可点击切换图片,关闭按钮可以关闭预览图片
10.2. 用法2 : 淡入淡出切换图片模式
点击预览图片后,切换图片的时候会增加淡入淡出的动画效果 11. 完整代码[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 清除内外边距 */
*{
margin: 0;
padding: 0;
}
/* 设置整个页面的背景颜色 */
body{
background-color: #666666;
}
/* 设置总宽度,在页面中居中显示 */
.gallery{
width: 1000px;
margin: 50px auto;
}
/*设置a标签左浮动,宽度高度*/
.gallery a{
float: left;
width: 240px;
height: 180px;
margin-right: 10px;
margin-top: 10px;
}
/*统一设置img图片大小*/
.gallery a img{
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="css/baguetteBox.min.css">
<!-- 引入jquery库 -->
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src='js/baguetteBox.min.js'></script>
<script type="text/javascript">
$(function(){
baguetteBox.run('.gallery', {
animation: 'fadeIn',
noScrollbars: true
});
})
</script>
</head>
<body>
<div class="gallery">
<a href="images/1-1.jpg">
<img src="images/thumbs/1-1.jpg">
</a>
<a href="images/1-2.jpg">
<img src="images/thumbs/1-2.jpg">
</a>
<a href="images/1-3.jpg">
<img src="images/thumbs/1-3.jpg">
</a>
<a href="images/1-4.jpg">
<img src="images/thumbs/1-4.jpg">
</a>
<a href="images/1-5.jpg">
<img src="images/thumbs/1-5.jpg">
</a>
<a href="images/1-6.jpg">
<img src="images/thumbs/1-6.jpg">
</a>
<a href="images/1-7.jpg">
<img src="images/thumbs/1-7.jpg">
</a>
<a href="images/1-8.jpg">
<img src="images/thumbs/1-8.jpg">
</a>
</div>
</body>
</html> | 
收藏
淘帖
踩
