(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);