最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

Pirobox弹出层插件

来源:http://www.erdangjiade.com/ 二当家的 2015-09-07 15:04浏览(1465)

本文演示了PIROBOX插件多种演示效果,包括文字内容、图片、视频video、iframe等多种形式。支持上一页、下一页、关闭、loading、自定义标题、拖动等功能。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

Pirobox弹出层插件
分类:悬浮层/弹出层 > 拖动 难易:中级
查看演示 下载资源: 106

关注微信号获取此Demo视频教程:

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

引入pirobox弹出层插件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/pirobox_extended.js"></script>
<script type="text/javascript">
    $(function() {
        $().piroBox_ext({
            piro_speed: 700,
            bg_alpha: 0.5,
            piro_scroll: true // pirobox always positioned at the center of the page
        });
    });
</script>

演示一:图片画廊

只要给a标签加上class="pirobox_gall"即可,标题则是title属性值

<ul>
    <li><a href="img/27.jpg" rel="gallery"  class="pirobox_gall" title="jQuery特效"><img src="img/27s.jpg"  /></a></li>
    <li><a href="img/29.jpg" rel="gallery"  class="pirobox_gall" title="网站模板"><img src="img/29s.jpg"  /></a></li>
    <li><a href="img/30.jpg" rel="gallery"  class="pirobox_gall" title="网站源码"><img src="img/30s.jpg"  /></a></li>
</ul>

演示二:单个图片

<a href="img/32.jpg" rel="single"  class="pirobox" title="素材火合作伙伴"><img src="img/32s.jpg"  /></a>支持自定义标题、图片

演示三:图片url出错

<a href="img/fòòflglnnb.jpg" rel="single"  class="pirobox">
    <img src="img/13s.jpg"  />
</a>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/485.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    04-23 20:11
    qqlixiangabc
    效果很是相当炫酷的啊。,。。
1 2