JQuery实现灯箱特效

给大家分享一个基于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="data:images/1.jpg"></a><a href="images/2.jpg" title="Caption for image B"><img src="data:images/3.jpg"></a><a href="images/4.jpg" title="Caption for image C"><img src="data:images/5.jpg"></a><a href="images/6.jpg" title="Caption for image D"><img src="data: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 itemsthis.$box = null;      // the lightbox modalthis.$items = null;    // recomputed each time its openedthis.idx = 0;          // of the $items which index are we onthis.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 buttonnext: '&rarr;',        // use an image, text, whatever for the next buttonloading: '%',          // use an image, text, whatever for the loading notificationclose: '&times;',      // use an image, text, whatever for the close buttonspeed: 400,            // speed to fade in or outzIndex: 1000,          // zIndex to apply to the outer containercycle: true,           // whether to cycle through galleries or stop at endscaptionAttr: 'title',  // name of the attribute to grab the caption fromtemplate: '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 startt.$items = t.settings.selector === null ? t.$el : t.$el.find(t.settings.selector);if (isNaN(i)) {i = t.$items.index(i);}// build the reboxt.$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 closescase 37: t.prev(); break;  // left arrow to prevcase 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); }
}

JQuery实现灯箱特效相关推荐

HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...
分享8款简单大气的jQuery/CSS3图片特效
自从jQuery问世以后,网页上就流行很多漂亮的图片效果,像淡入淡出或者焦点图等,但是,现在jQuery结合CSS3,我们可以打造更美观更实用的图片特效.下面分享8款简单而又大气的jQuery/CSS ...
html炫酷弹幕特效,jQuery文字弹幕特效
特效描述:jQuery 文字弹幕特效.jQuery文字弹幕特效代码结构 1. 引入JS 2. HTML代码弹幕(点我呀!!) X 让我来一个弹幕嘿嘿赞你哈哈 51前端 $(function( ...
js,jquery,css,html5特效
js,jquery,css,html5特效包含js,jquery,css,html5特效,源代码本文地址:http://www.cnblogs.com/Jeremy2001/p/6089343.h ...
jQuery系列第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
漂亮实用的jQuery倒计时插件特效代码
原文:漂亮实用的jQuery倒计时插件特效代码源代码下载地址:http://www.zuidaima.com/share/1799598875675648.htm
html实现放大镜效果,利用jquery实现放大镜特效
特效描述:利用jquery实现放大镜特效.利用jquery实现放大镜特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 /* imgbox 当前图片区域 hoverbox 鼠标移入 ...
jQuery 3D文字特效
jQuery 3D文字特效 jQuery 3D文字特效 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &q ...
发展简史jQuery时间轴特效
发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="w ...
高端大气上档次的jQuery Lightbox 灯箱插件
jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频和其它内容,这篇jQuery Lightbox灯箱插件推荐为你介绍2021最佳jQuery Lightbox插 ...

JQuery实现灯箱特效

JQuery实现灯箱特效相关推荐

最新文章

热门文章