最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

baguetteBox图片弹出层插件

来源:http://www.erdangjiade.com/ 沐浴春风 2015-06-15 06:37浏览(1566)

今天为大家分享一套 lightbox JS插件--baguetteBox.js,它是用纯Javascript创建的图像展示效果,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

baguetteBox图片弹出层插件
分类:导航菜单 > 动画导航 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

baguetteBox.js 优势

  • javascript完成,不需要jQuery库支持
  • 支持触屏手机端
  • 支持显示标题和说明等
  • 支持响应式效果
  • 支持CSS3过渡效果
  • 使用 SVG 按钮,没有多余的文件下载
  • 启用 gzip 压缩后仅 2KB

<div class="header large">
 <ul class="nav">
    <li><a class="cur" href="http://www.erdangjiade.com/" title="首页">首页</a></li>
    <li><a href="http://www.erdangjiade.com/templates" title="模板">网站模板</a></li>
    <li><a href="http://www.erdangjiade.com/js" title="网页特效">网页特效</a></li>
    <li><a href="http://www.erdangjiade.com/psd" title="网站psd">网站psd</a></li>
 </ul>
</div>

引入jQuery库和baguetteBox相关插件

<script src="js/jquery.js"></script>
<script src="js/baguetteBox.js"></script>

HTML

我们在页面上放置多个可点击的缩略图,并且在a标签上加上图片链接href属性和data-caption标题

<div class="baguetteBox">
    <a href="img/1-1.jpg" data-caption="Golden Gate Bridge"><img src="img/thumbs/1-1.jpg"></a>
    <a href="img/1-2.jpg" title="Midnight City"><img src="img/thumbs/1-2.jpg"></a>
   ......
</div>

jQuery

$(function(){
    baguetteBox.run('.baguetteBox', {
        //options
    });
});
参数 描述 默认值
captions 显示图片说明 true
buttons 显示按钮,可选 ‘auto’ / true / false auto
async 异步加载文件 false
preload 需要预加载图片的个数 2
animation 动画方式,可选 slideIn / fadeIn slideIn
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/195.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2