(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(''); //重新计算移动盒子与图片的倍数 multiple = magnifier.width / boxMoveViewWidth; //容器加载图片 _this.view.empty().append(''); //偏移量 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);