响应速度快的jQuery Lightbox插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是响应速度快的jQuery Lightbox插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="demo/normalize.css">
<link rel="stylesheet" href="demo/bagpakk.min.css">
<link rel="stylesheet" href="demo/style.css">
<link rel="stylesheet" href="src/css/swipebox.css">
<title>响应速度快的jQuery Lightbox插件</title>
</head>
<body>
<div id="fb-root"></div>

<section id="exemple" class="container">
	<div class="wrap small-width">
		<div id="try"></div>
		<ul id="box-container">
			<li class="box">
				<a href="images/image-1.jpg" class="swipebox" title="Fog">
					<img src="images/image-1.jpg" alt="image">
				</a>
			</li>
			<li class="box">
				<a href="images/image-2.jpg" class="swipebox" title="City">
					<img src="images/image-2.jpg" alt="image">
				</a>
			</li>
			<li class="box">
				<a href="images/image-3.jpg" class="swipebox" title="Street">
					<img src="images/image-3.jpg" alt="image">
				</a>
			</li>
			<li class="box">
				<a href="images/image-4.jpg" class="swipebox" title="Mustache Guy">
					<img src="images/image-4.jpg" alt="image">
				</a>
			</li>
		</ul>
	</div>
</section>

<script src="lib/ios-orientationchange-fix.js"></script>
<script src="lib/jquery-2.1.0.min.js"></script>
<script src="src/js/jquery.swipebox.js"></script>
<script type="text/javascript">
$( document ).ready(function() {

		/* Basic Gallery */
		$( '.swipebox' ).swipebox();
		
		/* Video */
		$( '.swipebox-video' ).swipebox();

		/* Dynamic Gallery */
		$( '#gallery' ).click( function( e ) {
			e.preventDefault();
			$.swipebox( [
				{ href : 'images/image-1.jpg', title : 'My Caption' },
				{ href : 'images/image-2.jpg', title : 'My Second Caption' }
			] );
		} );

  });
</script>
</body>
</html>

JS代码(ios-orientationchange-fix.js):

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl,rebound by @wilto. MIT / GPLv2 License.*/
(function(w){
	// This fix addresses an iOS bug,so return early if the UA claims it's something else.var ua = navigator.userAgent;
	if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){
	return;
}
var doc = w.document;
	if( !doc.querySelector ){
	return;
}
var meta = doc.querySelector( "meta[name=viewport]" ),initialContent = meta && meta.getAttribute( "content" ),disabledZoom = initialContent + ",maximum-scale=1",enabledZoom = initialContent + ",maximum-scale=10",enabled = true,x,y,z,aig;
	if( !meta ){
	return;
}
function restoreZoom(){
	meta.setAttribute( "content",enabledZoom );
	enabled = true;
}
function disableZoom(){
	meta.setAttribute( "content",disabledZoom );
	enabled = false;
}
function checkTilt( e ){
	aig = e.accelerationIncludingGravity;
	x = Math.abs( aig.x );
	y = Math.abs( aig.y );
	z = Math.abs( aig.z );
	// If portrait orientation and in one of the danger zones if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){
	if( enabled ){
	disableZoom();
}
}
else if( !enabled ){
	restoreZoom();
}
}
w.addEventListener( "orientationchange",restoreZoom,false );
	w.addEventListener( "devicemotion",checkTilt,false );
}
)( this );

CSS代码(normalize.css):

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
h1{font-size:2em;margin:0.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}

CSS代码(style.css):

body{font-family:'Merriweather',serif;border-top:5px solid #4BBD93;overflow-x:hidden !important;background:#FFF;color:#666}
body img{opacity:1 !important}
h1,h2,h3,h4,h4,h6{font-family:'Raleway',sans-serif}
a{text-decoration:none}
ol{margin-left:2em;margin-bottom:2em}
ul{margin-left:1em;margin-bottom:0}
ul ul{margin-left:1em}
header h1{margin-top:0;font-size:12rem}
.lead{margin-bottom:2em}
#fork-this{position:absolute;z-index:1;right:0;top:5px;width:0px;height:0px;border-style:solid;border-width:0 150px 150px 0;border-color:transparent #4BBD93 transparent transparent}
#fork-this a{display:block;position:absolute;z-index:10;width:150px;height:150px;top:0;right:-150px;z-index:10;background:url("fork.png") no-repeat 0 0;background-size:150px 150px}
#share{margin-bottom:3rem}
#share #fb,#share #twitter{display:inline-block}
#share #fb{position:relative;top:-8px}
.container:nth-child(even){background:whitesmoke}
.container:nth-child(odd){background:#fff}
#box-container{margin:0;padding:0}
.box{list-style-type:none;float:left;margin-bottom:1rem;margin-left:1%;margin-right:1%;width:48%}
.box:nth-child(2n+1){clear:both;margin-left:0}
.box:nth-child(2n+0){margin-right:0}
.box a{display:block;width:100%;height:auto}
.box a img{-webkit-back-visibility:hidden;display:block;width:100%;height:auto;vertical-align:bottom}
footer{font-size:1.3rem;font-family:"Helvetica neue",Helvetica,Arial,sans-serif;text-align:center;color:#666;margin:2rem 0}
footer a{color:#666}
@media screen and (max-width:799px){header h1{font-size:8rem}
hr{margin:2rem 0}
#fork-this{display:none}
#share #fb{top:-8px}
.button{margin-left:0;margin-right:0;width:100%}
.button{font-size:1.3rem;padding:1.4rem 2rem}
}
@media screen and (max-width:410px){header h1{font-size:5rem}
.box{width:100%;margin-left:0;margin-right:0}
}

附件:下载该文件资源,减少时间成本(增值服务)