jQuery空间相册梦幻效果js代码

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

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

以下是 jQuery空间相册梦幻效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>�ռ����SpaceGallery</title>
    <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/custom.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/eye.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/spacegallery.js"></script>
    <script type="text/javascript" src="js/layout.js"></script>
</head>
<body>
    <div class="wrapper">
        <h1>Spacegallery</h1>
        <ul class="navigationTabs">
            <li><a href="#about" rel="about">About</a></li>
        </ul>
        <div class="tabsContent">
            <div class="tab">
				<div id="myGallery" class="spacegallery">
					<img src="images/bw3.jpg" alt="" />
					<img src="images/lights3.jpg" alt="" />
					<img src="images/bw2.jpg" alt="" />
					<img src="images/lights2.jpg" alt="" />
					<img src="images/bw1.jpg" alt="" />
					<img src="images/lights1.jpg" alt="" />
				</div>
            </div>
            <div class="tab">
                <h2>Download</h2>
                <p><a href="spacegallery.zip">spacegallery.zip (205 kb)</a>: jQuery, Javscript files, CSS files, images, examples and instructions.</p>
                <h3>Changelog</h3>
                <dl>
					<dt>09.01.2008</dt>
					<dd>The first release release.</dd>
                </dl>
            </div>
            <div class="tab">
                <h2>Implement</h2>
                <p>Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to  images and change colors to fit your site theme. <strong>Important:</strong> be sure to include Javascript files in the specific order as in the example below.</p>
                <pre>
&lt;link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" /&gt;
&lt;script type="text/javascript" src="js/eye.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/utils.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/spacegallery.js"&gt;&lt;/script&gt;
                </pre>
                <h3>Invocation code</h3>
                <p>Prepare a block level element with some images inside. All you have to do is to select the elements in a jQuery way and call the plugin.</p>
                <pre>
$('#myGallery').spacegallery({loadingClass: 'loading'});
                </pre>
                <h3>Options</h3>
                <p>A hash of parameters. All parameters are optional.</p>
                <table>
                	<tr>
                		<td><strong>border</strong></td>
                		<td>integer</td>
                		<td>Images' border. Default: 0</td>
                	</tr>
                	<tr>
                		<td><strong>duration</strong></td>
                		<td>integer</td>
                		<td>Animation duration. Default 800</td>
                	</tr>
                	<tr>
                		<td><strong>perspective</strong></td>
                		<td>integer</td>
                		<td>Perpective height. Default: 140</td>
                	</tr>
                	<tr>
                		<td><strong>minScale</strong></td>
                		<td>float</td>
                		<td>Minimum scale for the image in the back. Default: 0.2</td>
                	</tr>
                	<tr>
                		<td><strong>loadingClass</strong></td>
                		<td>string</td>
                		<td>CSS class applied to the element while looading images. Default: null</td>
                	</tr>
                	<tr>
                		<td><strong>before</strong></td>
                		<td>function</td>
                		<td>Callback function triggered before going to the next image</td>
                	</tr>
                	<tr>
                		<td><strong>after</strong></td>
                		<td>function</td>
                		<td>Callback function triggered after going to the next image</td>
                	</tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

JS代码(eye.js):

/** * * Zoomimage * Author:Stefan Petre www.eyecon.ro * */
(function($){
	var EYE = window.EYE = function(){
	var _registered ={
	init:[]}
;
	return{
	init:function(){
	$.each(_registered.init,function(nr,fn){
	fn.call();
}
);
}
,extend:function(prop){
	for (var i in prop){
	if (prop[i] != undefined){
	this[i] = prop[i];
}
}
}
,register:function(fn,type){
	if (!_registered[type]){
	_registered[type] = [];
}
_registered[type].push(fn);
}
}
;
}
();
	$(EYE.init);
}
)(jQuery);

JS代码(utils.js):

/** * * Utilities * Author:Stefan Petre www.eyecon.ro * */
(function($){
	EYE.extend({
	getPosition:function(e,forceIt){
	var x = 0;
	var y = 0;
	var es = e.style;
	var restoreStyles = false;
	if (forceIt && jQuery.curCSS(e,'display') == 'none'){
	var oldVisibility = es.visibility;
	var oldPosition = es.position;
	restoreStyles = true;
	es.visibility = 'hidden';
	es.display = 'block';
	es.position = 'absolute';
}
var el = e;
	if (el.getBoundingClientRect){
	// IEvar box = el.getBoundingClientRect();
	x = box.left + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft) - 2;
	y = box.top + Math.max(document.documentElement.scrollTop,document.body.scrollTop) - 2;
}
else{
	x = el.offsetLeft;
	y = el.offsetTop;
	el = el.offsetParent;
	if (e != el){
	while (el){
	x += el.offsetLeft;
	y += el.offsetTop;
	el = el.offsetParent;
}
}
if (jQuery.browser.safari && jQuery.curCSS(e,'position') == 'absolute' ){
	x -= document.body.offsetLeft;
	y -= document.body.offsetTop;
}
el = e.parentNode;
	while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML'){
	if (jQuery.curCSS(el,'display') != 'inline'){
	x -= el.scrollLeft;
	y -= el.scrollTop;
}
el = el.parentNode;
}
}
if (restoreStyles == true){
	es.display = 'none';
	es.position = oldPosition;
	es.visibility = oldVisibility;
}
return{
	x:x,y:y}
;
}
,getSize:function(e){
	var w = parseInt(jQuery.curCSS(e,'width'),10);
	var h = parseInt(jQuery.curCSS(e,'height'),10);
	var wb = 0;
	var hb = 0;
	if (jQuery.curCSS(e,'display') != 'none'){
	wb = e.offsetWidth;
	hb = e.offsetHeight;
}
else{
	var es = e.style;
	var oldVisibility = es.visibility;
	var oldPosition = es.position;
	es.visibility = 'hidden';
	es.display = 'block';
	es.position = 'absolute';
	wb = e.offsetWidth;
	hb = e.offsetHeight;
	es.display = 'none';
	es.position = oldPosition;
	es.visibility = oldVisibility;
}
return{
	w:w,h:h,wb:wb,hb:hb}
;
}
,getClient:function(e){
	var h,w;
	if (e){
	w = e.clientWidth;
	h = e.clientHeight;
}
else{
	var de = document.documentElement;
	w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
}
return{
	w:w,h:h}
;
}
,getScroll:function (e){
	var t=0,l=0,w=0,h=0,iw=0,ih=0;
	if (e && e.nodeName.toLowerCase() != 'body'){
	t = e.scrollTop;
	l = e.scrollLeft;
	w = e.scrollWidth;
	h = e.scrollHeight;
}
else{
	if (document.documentElement){
	t = document.documentElement.scrollTop;
	l = document.documentElement.scrollLeft;
	w = document.documentElement.scrollWidth;
	h = document.documentElement.scrollHeight;
}
else if (document.body){
	t = document.body.scrollTop;
	l = document.body.scrollLeft;
	w = document.body.scrollWidth;
	h = document.body.scrollHeight;
}
if (typeof pageYOffset != 'undefined'){
	t = pageYOffset;
	l = pageXOffset;
}
iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
	ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
}
return{
	t:t,l:l,w:w,h:h,iw:iw,ih:ih}
;
}
,getMargins:function(e,toInteger){
	var t = jQuery.curCSS(e,'marginTop') || '';
	var r = jQuery.curCSS(e,'marginRight') || '';
	var b = jQuery.curCSS(e,'marginBottom') || '';
	var l = jQuery.curCSS(e,'marginLeft') || '';
	if (toInteger)return{
	t:parseInt(t,10)||0,r:parseInt(r,10)||0,b:parseInt(b,10)||0,l:parseInt(l,10)}
;
	elsereturn{
	t:t,r:r,b:b,l:l}
;
}
,getPadding:function(e,toInteger){
	var t = jQuery.curCSS(e,'paddingTop') || '';
	var r = jQuery.curCSS(e,'paddingRight') || '';
	var b = jQuery.curCSS(e,'paddingBottom') || '';
	var l = jQuery.curCSS(e,'paddingLeft') || '';
	if (toInteger)return{
	t:parseInt(t,10)||0,r:parseInt(r,10)||0,b:parseInt(b,10)||0,l:parseInt(l,10)}
;
	elsereturn{
	t:t,r:r,b:b,l:l}
;
}
,getBorder:function(e,toInteger){
	var t = jQuery.curCSS(e,'borderTopWidth') || '';
	var r = jQuery.curCSS(e,'borderRightWidth') || '';
	var b = jQuery.curCSS(e,'borderBottomWidth') || '';
	var l = jQuery.curCSS(e,'borderLeftWidth') || '';
	if (toInteger)return{
	t:parseInt(t,10)||0,r:parseInt(r,10)||0,b:parseInt(b,10)||0,l:parseInt(l,10)||0}
;
	elsereturn{
	t:t,r:r,b:b,l:l}
;
}
,traverseDOM:function(nodeEl,func){
	func(nodeEl);
	nodeEl = nodeEl.firstChild;
	while(nodeEl){
	EYE.traverseDOM(nodeEl,func);
	nodeEl = nodeEl.nextSibling;
}
}
,getInnerWidth:function(el,scroll){
	var offsetW = el.offsetWidth;
	return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
}
,getInnerHeight:function(el,scroll){
	var offsetH = el.offsetHeight;
	return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
}
,getExtraWidth:function(el){
	if($.boxModel)return (parseInt($.curCSS(el,'paddingLeft'))||0)+ (parseInt($.curCSS(el,'paddingRight'))||0)+ (parseInt($.curCSS(el,'borderLeftWidth'))||0)+ (parseInt($.curCSS(el,'borderRightWidth'))||0);
	return 0;
}
,getExtraHeight:function(el){
	if($.boxModel)return (parseInt($.curCSS(el,'paddingTop'))||0)+ (parseInt($.curCSS(el,'paddingBottom'))||0)+ (parseInt($.curCSS(el,'borderTopWidth'))||0)+ (parseInt($.curCSS(el,'borderBottomWidth'))||0);
	return 0;
}
,isChildOf:function(parentEl,el,container){
	if (parentEl == el){
	return true;
}
if (!el || !el.nodeType || el.nodeType != 1){
	return false;
}
if (parentEl.contains && !$.browser.safari){
	return parentEl.contains(el);
}
if ( parentEl.compareDocumentPosition ){
	return !!(parentEl.compareDocumentPosition(el) & 16);
}
var prEl = el.parentNode;
	while(prEl && prEl != container){
	if (prEl == parentEl)return true;
	prEl = prEl.parentNode;
}
return false;
}
,centerEl:function(el,axis){
	var clientScroll = EYE.getScroll();
	var size = EYE.getSize(el);
	if (!axis || axis == 'vertically')$(el).css({
	top:clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'}
);
	if (!axis || axis == 'horizontally')$(el).css({
	left:clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'}
);
}
}
);
	if (!$.easing.easeout){
	$.easing.easeout = function(p,n,firstNum,delta,duration){
	return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
}
;
}
}
)(jQuery);

CSS代码(custom.css):

#myGallery{width:100%;height:300px;}
#myGallery img{border:2px solid #52697E;}
a.loading{background:#fff url(../images/ajax_small.gif) no-repeat center;}

CSS代码(spacegallery.css):

.spacegallery{position:relative;overflow:hidden;}
.spacegallery img{position:absolute;left:50%;}
.spacegallery a{position:absolute;z-index:1000;display:block;top:0;left:0;width:100%;height:100%;background:url(images/blank.gif);}

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