caipan_shop_admin/public/static/js/magnifier.js

(function($){
	
	var fnName = 'magnifier';
	var magnifier = {
		magnifier : ".magnifier",//最外层的大容器

		container : ".magnifier-container",//选择当前主图的承载容器

		containerImg : '.images-cover',//图片的容器

		view : ".magnifier-view",//图片放大后承载容器

		width : 400,//图片放大后承载容器宽度

		height : 400,//图片放大后承载容器高度

		moveView : ".move-view",//跟随鼠标移动的容器

		moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例

		zoom : 4,//缩放比例

		thumbnail : ".magnifier-line > ul",//缩略图容器

		assembly : ".magnifier-btn",//按钮组

		index : 0//当前图片的索引
	};


	window[fnName] = function(magnifierAttr){

		//设置属性值
		if(typeof(magnifierAttr) == "object"){

			for( var n in magnifierAttr){

				magnifier[n] = magnifierAttr[n];
			}
		}

		var _this = this;
		//绑定容器
		_this.magnifier = $(magnifier.magnifier);
		_this.container = _this.magnifier.find(magnifier.container);
		_this.view = _this.magnifier.find(magnifier.view);
		_this.moveView = _this.magnifier.find(magnifier.moveView);
		_this.thumbnail = _this.magnifier.find(magnifier.thumbnail);
		_this.assembly = _this.magnifier.find(magnifier.assembly);
		_this.containerImg = _this.magnifier.find(magnifier.containerImg);
		var imgBox = _this.containerImg;

		//設置寬高
		_this.magnifier.css({
			"width" : magnifier.width
		});
		_this.container.css({
			"width" : magnifier.width,
			"height" : magnifier.height
		});
		_this.view.css({
			"width" : magnifier.width,
			"height" : magnifier.height
		});

		var boxMoveViewWidth,boxMoveViewHeight;
		if(magnifier.moveWidth){

			boxMoveViewWidth = magnifier.moveWidth;
		}else{

			boxMoveViewWidth = magnifier.width/magnifier.zoom;
		}
		boxMoveViewHeight = boxMoveViewWidth;

		_this.moveView.css({
			"width" : boxMoveViewWidth,
			"height" : boxMoveViewHeight
		});

		//计算体积碰撞的变量
		var deviationXl,
			deviationXr,
			deviationYt,
			deviationYb,
			imgWidth,
			imgHieght,
			multiple;

		_this.eqImg = function(){

			var img = new Image(),
				src = _this.thumbnail.find("img").eq(magnifier.index).attr('src');

			img.src = src;
			
			//承载容器的宽高
			containerWidth = magnifier.width;
			containerHeight = magnifier.height;

			_this.thumbnail.find('>*').removeClass('active').eq(magnifier.index).addClass('active');

			function imgLoadEnd(){
				
				if(img.width == 0){

					img.onload = imgLoadEnd;
				}

				var styleCss;
				if(img.width > img.height){
					
					imgWidth = magnifier.width;
					imgHieght = img.height / (img.width / magnifier.width);
					styleCss = "top:50%;margin-top:"+(-imgHieght/2)+"px";
				}else{

					imgWidth = img.width / (img.height / magnifier.width);
					imgHieght = magnifier.width;
					
					styleCss = "left:50%;margin-left:"+(-imgWidth/2)+"px";
				}

				imgBox.empty().append('<img src="'+src+'" width="'+imgWidth+'" height="'+imgHieght+'" style="'+styleCss+'" />');
				
				//重新计算移动盒子与图片的倍数
				multiple = magnifier.width / boxMoveViewWidth;

				//容器加载图片
				_this.view.empty().append('<img src="'+src+'" width="'+imgWidth*multiple+'" height="'+imgHieght*multiple+'" />');
			
				//偏移量
				deviationXl = (magnifier.width - imgWidth) /2;
				deviationXr = magnifier.width - deviationXl - boxMoveViewWidth + 1;//这里额外+1的是要计算容器的左边框
				deviationYt = (magnifier.height - imgHieght) /2;
				deviationYb = magnifier.height - deviationYt - boxMoveViewHeight + 1;//这里额外+1的是要计算容器的上边框

			}

			imgLoadEnd();
		}
		//完成后执行
		_this.eqImg();

		_this.moveFn = function(e){

			var X = (e.clientX-_this.magnifier.offset().left)-boxMoveViewWidth/2,
				Y = (e.clientY-_this.magnifier.offset().top + $(document).scrollTop())-boxMoveViewHeight/2;

			endX = (X > deviationXl) ? (X < deviationXr) ? X : deviationXr : deviationXl;
			endY = (Y > deviationYt) ? (Y < deviationYb) ? Y : deviationYb : deviationYt;
			
			//当Y轴超出容器
			endY = (endY > 0) ? (endY > (magnifier.width-boxMoveViewHeight)) ? (magnifier.height-boxMoveViewHeight) : endY : 0;
			_this.moveView.css({
				'left' : endX,
				'top' : endY,
				'display' : "block"
			});
			
			positionX = (endX - (magnifier.width-imgWidth)/2)*multiple;
			positionY = (endY - (magnifier.height-imgHieght)/2)*multiple;

			_this.view.css({
				'display' : "block"
			}).find('img').css({
				'margin-left' : -positionX,
				'margin-top' : -positionY
			});
		}

		_this.container.on('mousemove',function(e){
			
			_this.moveFn(e);

		}).on('mouseleave',function(){

			_this.moveView.hide();
			_this.view.hide();
		});

		var thumbnailImg = _this.thumbnail.find('>*'),
			lineLenght = thumbnailImg.length;
		_this.imgMove = function(_boole){

			(_boole) ? magnifier.index++ : magnifier.index--;

			var _deviation = Math.ceil(magnifier.width / thumbnailImg.width() /2);
			if(lineLenght < _deviation){
				return false;
			}
			
			(magnifier.index < 0) ? magnifier.index = 0 : (magnifier.index > lineLenght-_deviation) ? magnifier.index = lineLenght - _deviation : magnifier.index;

			var endLeft = (thumbnailImg.width() * magnifier.index) - thumbnailImg.width();
			
			_this.thumbnail.css({

				"left" : ((endLeft > 0) ? -endLeft : 0)+"px"
			});
		}

		//按钮组动作
		_this.assembly.find(">*").on('click',function(){

			_this.imgMove($(this).index());
		});

		thumbnailImg.on('click',function(){

			magnifier.index = $(this).index();

			//显示图片
			_this.eqImg();

			//缩略图位置移动
			_this.imgMove(magnifier.index);
		});

		_this.setIndex = function(n){

			magnifier.index = (n) ? n : 0;
		}

		return _this;
	}
})(jQuery);