2017/4/17 17:29:13更新:
修改了插件的兼容性, 新增一些属性, 内置函数的调用( 下面是新的调用方法)
var magnifierConfig = {
magnifier: "#magnifier1", //最外层的大容器
width: 500, //承载容器宽
height: 500, //承载容器高
moveWidth: null, //如果设置了移动盒子的宽度,则不计算缩放比例
zoom: 5 //缩放比例
};
var _magnifier = magnifier(magnifierConfig);
/*magnifier的内置函数调用*/
/*
//设置magnifier函数的index属性
_magnifier.setIndex(1);//重新载入主图,根据magnifier函数的index属性
_magnifier.eqImg();
*/2017-03-06更新:
修改bug,打开控制台,让控制台在页面的下方显示,鼠标移到大图上再移开,页面往下拉,再放鼠标到大图上, 鼠标下的移动框在鼠标下面了,将点击事件改成鼠标经过事件
2017-02-28更新:
修改了鼠标放置小图依旧触发放大效果,代码不变仅修改了mousemove的绑定容器(div)
参数均为可选参数
magnifier({
width : 500,//主容器宽
height : 500,//主容器高
magnifier : "#magnifier1",//主容器
});
你好,我想在一页里面 弄多两个jQuery图片放大镜,我把id 换成"#magnifier1, #magnifier2, #magnifier3" 。第一个图片放大镜 没问题,可是第二,第三 图片放大镜不能自由移动,怎么办?
$(function() {
var magnifierConfig = {
magnifier: "#magnifier1, #magnifier2, #magnifier3",
width: 500,
height: 500,
moveWidth: null,
zoom: 5
};
var _magnifier = magnifier(magnifierConfig);
});
回复
恩我是当图片小于或者等于6张的时候就出bug了,是右侧按钮在明明小图已经显示全了的情况下还可以一直点。。。恩后来看了下是右侧按钮没有加disabled,然后宝宝就只好在页面加载完后加了这句
if($("#imageMenu li").length <= 6){
$('.smallImgDown').addClass('disabled');
}判断是简单粗暴了些。。。不知还有别的招:)
回复