JQuery实现灯箱特效

越陌度阡

发布于 2022-11-27 17:38:04

9K0

发布于 2022-11-27 17:38:04

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

给大家分享一个基于JQuery实现的灯箱特效，实现效果如下：

主要用到了jquery-rebox.js这个插件，以下是代码实现。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery-rebox实现灯箱特效</title>
    <link rel="stylesheet" href="css/jquery-rebox.css">
    <script src="js/jquery.min.1.11.1.js"></script>
    <script src="js/jquery-rebox.js"></script>
</head>

<body>
    <div id="gallery" class="gallery">
        <!-- href的图片是大图，src的图片是小图 -->
        <a href="images/0.jpg" title="Caption for image A">
            <img src="images/1.jpg">
        </a>
        <a href="images/2.jpg" title="Caption for image B">
            <img src="images/3.jpg">
        </a>
        <a href="images/4.jpg" title="Caption for image C">
            <img src="images/5.jpg">
        </a>
        <a href="images/6.jpg" title="Caption for image D">
            <img src="images/7.jpg">
        </a>
    </div>
    <script>
        $('#gallery').rebox({ selector: 'a' });
    </script>
</body>

</html>

这个插件现在网上不好找，现给大家奉上，以下是插件Jquery-rebox.js的代码。

(function ($) {
    $.rebox = function ($this, options) {
        this.settings = $.extend(true, {}, $.rebox.defaults, options);
        this.$el = $this;      // parent container holding items
        this.$box = null;      // the lightbox modal
        this.$items = null;    // recomputed each time its opened
        this.idx = 0;          // of the $items which index are we on
        this.enable();
    };

    $.rebox.defaults = {
        theme: 'rebox',        // class name parent gets (for your css)
        selector: null,        // the selector to delegate to, should be to the <a> which contains an <img>
        prev: '&larr;',        // use an image, text, whatever for the previous button
        next: '&rarr;',        // use an image, text, whatever for the next button
        loading: '%',          // use an image, text, whatever for the loading notification
        close: '&times;',      // use an image, text, whatever for the close button
        speed: 400,            // speed to fade in or out
        zIndex: 1000,          // zIndex to apply to the outer container
        cycle: true,           // whether to cycle through galleries or stop at ends
        captionAttr: 'title',  // name of the attribute to grab the caption from
        template: 'image',     // the default template to be used (see templates below)
        templates: {           // define templates to create the elements you need function($item, settings)
            image: function ($item, settings, callback) {
                return $('<img src="' + $item.attr('href') + '" class="' + settings.theme + '-content" />').load(callback);
            }
        }
    };

    $.rebox.setDefaults = function (options) {
        $.rebox.defaults = $.extend(true, {}, $.rebox.defaults, options);
    };

    $.rebox.lookup = { i: 0 };

    $.extend($.rebox.prototype, {
        enable: function () {
            var t = this;

            return t.$el.on('click.rebox', t.settings.selector, function (e) {
                e.preventDefault();
                t.open(this);
            });
        },
        open: function (i) {
            var t = this;

            // figure out where to start
            t.$items = t.settings.selector === null ? t.$el : t.$el.find(t.settings.selector);
            if (isNaN(i)) {
                i = t.$items.index(i);
            }

            // build the rebox
            t.$box = $('<div class="' + t.settings.theme + '" style="display:none;">' +
                '<a href="#" class="' + t.settings.theme + '-close ' + t.settings.theme + '-button">' + t.settings.close + '</a>' +
                '<a href="#" class="' + t.settings.theme + '-prev ' + t.settings.theme + '-button">' + t.settings.prev + '</a>' +
                '<a href="#" class="' + t.settings.theme + '-next ' + t.settings.theme + '-button">' + t.settings.next + '</a>' +
                '<div class="' + t.settings.theme + '-contents"></div>' +
                '<div class="' + t.settings.theme + '-caption"><p></p></div>' +
                '</div>').appendTo('body').css('zIndex', t.settings.zIndex).fadeIn(t.settings.speed)
                .on('click.rebox', '.' + t.settings.theme + '-close', function (e) { e.preventDefault(); t.close(); })
                .on('click.rebox', '.' + t.settings.theme + '-next', function (e) { e.preventDefault(); t.next(); })
                .on('click.rebox', '.' + t.settings.theme + '-prev', function (e) { e.preventDefault(); t.prev(); });

            // add some key hooks
            $(document).on('swipeLeft.rebox', function (e) { t.next(); })
                .on('swipeRight.rebox', function (e) { t.prev(); })
                .on('keydown.rebox', function (e) {
                    e.preventDefault();
                    var key = (window.event) ? event.keyCode : e.keyCode;
                    switch (key) {
                        case 27: t.close(); break; // escape key closes
                        case 37: t.prev(); break;  // left arrow to prev
                        case 39: t.next(); break;  // right arrow to next
                    }
                });

            t.$el.trigger('rebox:open', [t]);
            t.goto(i);
            return t.$el;
        },
        close: function () {
            var t = this;

            if (t.$box && t.$box.length) {
                t.$box.fadeOut(t.settings.speed, function (e) {
                    t.$box.remove();
                    t.$box = null;
                    t.$el.trigger('rebox:close', [t]);
                });
            }
            $(document).off('.rebox');

            return t.$el;
        },
        goto: function (i) {
            var t = this,
                $item = $(t.$items[i]),
                captionVal = $item.attr(t.settings.captionAttr),
                $cap = t.$box.children('.' + t.settings.theme + '-caption')[captionVal ? 'show' : 'hide']().children('p').text(captionVal),
                $bi = t.$box.children('.' + t.settings.theme + '-contents'),
                $img = null;

            if ($item.length) {
                t.idx = i;
                $bi.html('<div class="' + t.settings.theme + '-loading ' + t.settings.theme + '-button">' + t.settings.loading + '</div>');

                $img = t.settings.templates[$item.data('rebox-template') || t.settings.template]($item, t.settings, function (content) {
                    $bi.empty().append($(this));
                });

                if (t.$items.length == 1 || !t.settings.cycle) {
                    t.$box.children('.' + t.settings.theme + '-prev')[i <= 0 ? 'hide' : 'show']();
                    t.$box.children('.' + t.settings.theme + '-next')[i >= t.$items.length - 1 ? 'hide' : 'show']();
                }
                t.$el.trigger('rebox:goto', [t, i, $item, $img]);
            }
            return t.$el;
        },
        prev: function () {
            var t = this;
            return t.goto(t.idx === 0 ? t.$items.length - 1 : t.idx - 1);
        },
        next: function () {
            var t = this;
            return t.goto(t.idx === t.$items.length - 1 ? 0 : t.idx + 1);
        },
        disable: function () {
            var t = this;
            return t.close().off('.rebox').trigger('rebox:disable', [t]);
        },
        destroy: function () {
            var t = this;
            return t.disable().removeData('rebox').trigger('rebox:destroy');
        },
        option: function (key, val) {
            var t = this;
            if (val !== undefined) {
                t.settings[key] = val;
                return t.disable().enable();
            }
            return t.settings[key];
        }
    });

    $.fn.rebox = function (o) {
        o = o || {};
        var tmp_args = Array.prototype.slice.call(arguments);

        if (typeof (o) == 'string') {
            if (o == 'option' && typeof (tmp_args[1]) == 'string' && tmp_args.length === 2) {
                var inst = $.rebox.lookup[$(this).data('rebox')];
                return inst[o].apply(inst, tmp_args.slice(1));
            }
            else return this.each(function () {
                var inst = $.rebox.lookup[$(this).data('rebox')];
                inst[o].apply(inst, tmp_args.slice(1));
            });
        } else return this.each(function () {
            var $t = $(this);
            $.rebox.lookup[++$.rebox.lookup.i] = new $.rebox($t, o);
            $t.data('rebox', $.rebox.lookup.i);
        });
    };


})(window.jQuery || window.Zepto || window.$);

下面是引入的与插件有关的jquery-rebox.css文件代码了。

.rebox { 
    cursor: pointer; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
    -webkit-filter: none !important;
    background: rgb(0, 0, 0); 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);
    background: rgba(0, 0, 0, 0.7); 
}
.rebox *{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
}
.rebox-contents { 
    position: absolute; 
    top: 5%; 
    left: 5%; 
    text-align: center; 
    width: 90%; 
    height: 90%; 
}
.rebox-contents .rebox-content { 
    border: 5px solid #fff; 
    box-shadow: 0 0 20px #000; 
    border-radius: 1px; 
    max-width: 100%; 
    max-height: 100%; 
}
.rebox-loading { 
    width: 31px; 
    height: 31px; 
    margin: -16px 0 0 -16px; 
    position: absolute; 
    top: 48%; 
    left: 50%; 
}
.rebox-caption { 
    display: none; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    text-align: center; 
    z-index: 1000; 
    background: #000; 
    background: rgba(0,0,0,0.7); 
}
.rebox-caption p { 
    margin: 0 auto; 
    max-width: 70%; 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
    padding: 10px; 
    color: #fff; 
    font-size: 12px; 
    line-height: 18px; 
}

.rebox-button { 
    position: absolute; 
    z-index: 9999; 
    min-width: 40px; 
    height: 40px; 
    line-height: 40px; 
    background: rgb(0, 0, 0); 
    opacity:0.4; 
    text-decoration: none; 
    font-size: 24px; 
    color: #fff; 
    text-align: center; 
    vertical-align: middle;
    -webkit-border-radius: 32px; 
    -moz-border-radius: 32px; 
    -ms-border-radius: 32px; 
    border-radius: 32px;
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    transition: all 0.3s; 
}
.rebox-button:hover,
.rebox-button:focus { 
    opacity: 1; 
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4); 
    -ms-transform: scale(1.4); 
    transform: scale(1.4); 
}
.rebox-close { 
    right: 10px; 
    top: 10px; 
}
.rebox-next { 
    right: 10px; 
    top: 48%; 
}
.rebox-prev { 
    left: 10px; 
    top: 48%; 
}
.rebox-loading { 
    left: 50%; 
    top: 48%;
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 2000ms; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin; 
    -moz-animation-duration: 2000ms; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin; 
    -ms-animation-duration: 2000ms; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear;    
    animation-name: spin; 
    animation-duration: 2000ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-07-24，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

jquery

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

jquery

登录后参与评论

0 条评论

热度

JQuery实现灯箱特效

JQuery实现灯箱特效

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐