给大家分享一个基于JQuery实现的灯箱特效，实现效果如下：
主要用到了jquery-rebox.js这个插件，以下是代码实现。
代码语言：javascript复制<!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的代码。
代码语言：javascript复制(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: '←', // use an image, text, whatever for the previous button
next: '→', // use an image, text, whatever for the next button
loading: '%', // use an image, text, whatever for the loading notification
close: '×', // 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文件代码了。
代码语言：javascript复制.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); }
}
