http://www.emedguides.com/js/ML_magnifier.js

1(function($){
2	
3	var fnName = 'magnifier';
4	var magnifier = {
5		magnifier : ".magnifier",//最外层的大容器
6
7		container : ".magnifier-container",//选择当前主图的承载容器
8
9		containerImg : '.images-cover',//图片的容器
10
11		view : ".magnifier-view",//图片放大后承载容器
12
13		width : 400,//图片放大后承载容器宽度
14
15		height : 400,//图片放大后承载容器高度
16
17		moveView : ".move-view",//跟随鼠标移动的容器
18
19		moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例
20
21		zoom : 4,//缩放比例
22
23		thumbnail : ".magnifier-line > ul",//缩略图容器
24
25		assembly : ".magnifier-btn",//按钮组
26
27		index : 0//当前图片的索引
28	};
29
30
31	window[fnName] = function(magnifierAttr){
32
33		//设置属性值
34		if(typeof(magnifierAttr) == "object"){
35
36			for( var n in magnifierAttr){
37
38				magnifier[n] = magnifierAttr[n];
39			}
40		}
41
42		var _this = this;
43		//绑定容器
44		_this.magnifier = $(magnifier.magnifier);
45		_this.container = _this.magnifier.find(magnifier.container);
46		_this.view = _this.magnifier.find(magnifier.view);
47		_this.moveView = _this.magnifier.find(magnifier.moveView);
48		_this.thumbnail = _this.magnifier.find(magnifier.thumbnail);
49		_this.assembly = _this.magnifier.find(magnifier.assembly);
50		_this.containerImg = _this.magnifier.find(magnifier.containerImg);
51		var imgBox = _this.containerImg;
52
53		//設置寬高
54		_this.magnifier.css({
55			"width" : magnifier.width
56		});
57		_this.container.css({
58			"width" : magnifier.width,
59			"height" : magnifier.height
60		});
61		_this.view.css({
62			"width" : magnifier.width,
63			"height" : magnifier.height
64		});
65
66		var boxMoveViewWidth,boxMoveViewHeight;
67		if(magnifier.moveWidth){
68
69			boxMoveViewWidth = magnifier.moveWidth;
70		}else{
71
72			boxMoveViewWidth = magnifier.width/magnifier.zoom;
73		}
74		boxMoveViewHeight = boxMoveViewWidth;
75
76		_this.moveView.css({
77			"width" : boxMoveViewWidth,
78			"height" : boxMoveViewHeight
79		});
80
81		//计算体积碰撞的变量
82		var deviationXl,
83			deviationXr,
84			deviationYt,
85			deviationYb,
86			imgWidth,
87			imgHieght,
88			multiple;
89
90		_this.eqImg = function(){
91
92			var img = new Image(),
93				src = _this.thumbnail.find("img").eq(magnifier.index).attr('src');
94
95			img.src = src;
96			
97			//承载容器的宽高
98			containerWidth = magnifier.width;
99			containerHeight = magnifier.height;
100
101			_this.thumbnail.find('>*').removeClass('active').eq(magnifier.index).addClass('active');
102
103			function imgLoadEnd(){
104				
105				if(img.width == 0){
106
107					img.onload = imgLoadEnd;
108				}
109
110				var styleCss;
111				if(img.width > img.height){
112					
113					imgWidth = magnifier.width;
114					imgHieght = img.height / (img.width / magnifier.width);
115					styleCss = "top:50%;margin-top:"+(-imgHieght/2)+"px";
116				}else{
117
118					imgWidth = img.width / (img.height / magnifier.width);
119					imgHieght = magnifier.width;
120					
121					styleCss = "left:50%;margin-left:"+(-imgWidth/2)+"px";
122				}
123
124				imgBox.empty().append('<img src="'+src+'" width="'+imgWidth+'" height="'+imgHieght+'" style="'+styleCss+'" />');
125				
126				//重新计算移动盒子与图片的倍数
127				multiple = magnifier.width / boxMoveViewWidth;
128
129				//容器加载图片
130				_this.view.empty().append('<img src="'+src+'" width="'+imgWidth*multiple+'" height="'+imgHieght*multiple+'" />');
131			
132				//偏移量
133				deviationXl = (magnifier.width - imgWidth) /2;
134				deviationXr = magnifier.width - deviationXl - boxMoveViewWidth + 1;//这里额外+1的是要计算容器的左边框
135				deviationYt = (magnifier.height - imgHieght) /2;
136				deviationYb = magnifier.height - deviationYt - boxMoveViewHeight + 1;//这里额外+1的是要计算容器的上边框
137
138			}
139
140			imgLoadEnd();
141		}
142		//完成后执行
143		_this.eqImg();
144
145		_this.moveFn = function(e){
146
147			var X = (e.clientX-_this.magnifier.offset().left)-boxMoveViewWidth/2,
148				Y = (e.clientY-_this.magnifier.offset().top + $(document).scrollTop())-boxMoveViewHeight/2;
149
150			endX = (X > deviationXl) ? (X < deviationXr) ? X : deviationXr : deviationXl;
151			endY = (Y > deviationYt) ? (Y < deviationYb) ? Y : deviationYb : deviationYt;
152			
153			//当Y轴超出容器
154			endY = (endY > 0) ? (endY > (magnifier.width-boxMoveViewHeight)) ? (magnifier.height-boxMoveViewHeight) : endY : 0;
155			_this.moveView.css({
156				'left' : endX,
157				'top' : endY,
158				'display' : "block"
159			});
160			
161			positionX = (endX - (magnifier.width-imgWidth)/2)*multiple;
162			positionY = (endY - (magnifier.height-imgHieght)/2)*multiple;
163
164			_this.view.css({
165				'display' : "block"
166			}).find('img').css({
167				'margin-left' : -positionX,
168				'margin-top' : -positionY
169			});
170		}
171
172		_this.container.on('mousemove',function(e){

173			
174			_this.moveFn(e);
175
176		}).on('mouseleave',function(){
177
178			_this.moveView.hide();
179			_this.view.hide();
180		});
181
182		var thumbnailImg = _this.thumbnail.find('>*'),
183			lineLenght = thumbnailImg.length;
184		_this.imgMove = function(_boole){
185
186			(_boole) ? magnifier.index++ : magnifier.index--;
187
188			var _deviation = Math.ceil(magnifier.width / thumbnailImg.width() /2);
189			if(lineLenght < _deviation){
190				return false;
191			}
192			
193			(magnifier.index < 0) ? magnifier.index = 0 : (magnifier.index > lineLenght-_deviation) ? magnifier.index = lineLenght - _deviation : magnifier.index;
194
195			var endLeft = (thumbnailImg.width() * magnifier.index) - thumbnailImg.width();
196			
197			_this.thumbnail.css({
198
199				"left" : ((endLeft > 0) ? -endLeft : 0)+"px"
200			});
201		}
202
203		//按钮组动作
204		_this.assembly.find(">*").on('click',function(){
205
206			_this.imgMove($(this).index());
207		});
208
209		thumbnailImg.on('click',function(){
210
211			magnifier.index = $(this).index();
212
213			//显示图片
214			_this.eqImg();
215
216			//缩略图位置移动
217			_this.imgMove(magnifier.index);
218		});
219
220		_this.setIndex = function(n){
221
222			magnifier.index = (n) ? n : 0;
223		}
224
225		return _this;
226	}
227})(jQuery);