效果图
使用方法:
1.下载文件后,把Magnifier整个文件放在你的资源目录下
2.放大镜css文件可以在Magnifier.js中修改(默认是自动加载的可以不理会)
layui.link('../Magnifier/css/MangniFier.css');
3.插件定义方法有所改变,请悉知,如下:
layui.config({
base: '../Magnifier/' //假设这是你存放拓展模块的根目录
}).extend({
Magnifier: 'js/Magnifier'
,Event:'js/Event' //你存放插件的目录
});
layui.use(['layer', 'form','Event','Magnifier'], function(){
var layer =layui.layer
,evt =new layui.Event()
,Magnifier =new layui.Magnifier(evt,{
largeWrapper: document.getElementById('gallery-preview'),<!--预览图容器(必须)-->
});
Magnifier.attach({
thumb: '#lnk_thumb',//需要使用放大镜的图片元素(#id || .class)
zoom:3,//缩放比例
});
});
配置信息
thumb(string):ID or class of the image element to magnify preceded by "#" or "."
large(string):large image URL
largeWrapper(string):ID of the element where large image will be appended
zoom(int):initial zoom level
zoomable(bool):enable zoom in / out using mouse wheel
onthumbenter(callback):function to call on thumbnail enter event
onthumbmove(callback):function to call on thumbnail move event
onthumbleave(callback):function to call on thumbnail leave event
onzoom(callback):function to call on zoom event
具体可查看官方Magnifier