imagefly.js

JQuery实现的相册效果

/**
 * <pre>
 * ImageFly（实现图片飞出飞入效果）
 * potions: 
 * 		bigImgUrl 显示后的大图片Url
 * 		smallImgState: 缩略图状态
 * 		width: 宽 height: 高 top: 距离上边框 left: 距离左边框
 * </pre>
 */

$.ImageFly = function(options) {
	this.fields = $.extend({
		curState : 'small'
	}, options);
}

/**
 * <pre>
 * 	公共方法：
 * 	1.imgFly	图片飞出
 * 	2.ImgFlyBack	图片飞回	
 * </pre>
 */
$.ImageFly.prototype = {
	/**
	 * 飞出
	 */
	flyOut : function() {
		var fs = this.fields;
		// 1. 创建图片遮罩层
		var cover = this.createCover();
		cover.show();
		var obj = this;
		fs.img = new Image();

		$(fs.img).load(function() {

			// 2.创建大图片Dom，如果已存在，则直接飞出
			if (!fs.bigImgDom) {
				// 创建ImgDom文档对象
				fs.bigImgDom = obj.createBigImgDom();
			}
			cover.hide();
			// 计算大图片的状态
			fs.bigState = obj.calculateBigState();
			// 图片飞出
			fs.bigImgDom.show().animate(fs.bigState, 800);
			fs.curState = 'big';
			$(fs.bigImgDom).click(function() {
				obj.flyBack();
			});
		});
		fs.img.src = fs.bigImgUrl;
	},

	/**
	 * 飞入
	 */
	flyBack : function() {
		var fs = this.fields;
		fs.bigImgDom.animate({
			left : fs.bigState.left + 20,
			top : fs.bigState.top - 20
		}, 200).animate(fs.smallImgState, 300, function() {
			fs.bigImgDom.hide();
		});
		fs.curState = 'small';
	}

}

/**
 * <pre>
 * 私有方法
 * </pre>
 */
$.extend($.ImageFly.prototype, {
	createCover : function() {
		var state = this.fields.smallImgState;
		var cover = $('<div />').addClass('ImageFlyOut_cover').css(state)
				.appendTo('body');
		$('<div />').addClass('loadingImage').css(state).appendTo(cover);
		return cover;
	},

	createBigImgDom : function() {
		var bigImageDom = $('<img />').attr('src', this.fields.bigImgUrl);
		bigImageDom.addClass('ImageFlyOut_bigImageDom')
				.css(this.fields.smallImgState).appendTo('body');
		return bigImageDom;
	},

	/**
	 * 计算飞出后的状态
	 */
	calculateBigState : function() {
		// 声明变量
		var originalWidth = this.fields.img.width;
		var originalHeight = this.fields.img.height;
		var maxWidth = $(window).width() - 50;
		var maxHeight = $(window).height() - 50;
		var width;
		var height;

		// 长宽都小于最大值
		if (originalWidth <= maxWidth && originalHeight <= maxHeight) {
			width = originalWidth;
			height = originalHeight;
		}
		// 长宽有一个或都大于最大值
		else {
			// 宽高比例大于max宽高比例，按宽调整
			if (originalWidth * maxHeight > maxWidth * originalHeight) {
				// width / height > maxWidth / maxHeight
				height = originalHeight * maxWidth / originalWidth;
				width = maxWidth;
			}
			// 宽高比例小于max宽高比例，按高调整
			else {
				width = originalWidth * maxHeight / originalHeight;
				height = maxHeight;
			}
		}

		return {
			width : width,
			height : height,
			left : $(window).width() / 2 - width / 2 + $(window).scrollLeft(),
			top : $(window).height() / 2 - height / 2 + $(window).scrollTop()
		};
	}
});