效果圖
使用方法:
1.下載文件后，把Magnifier整個(gè)文件放在你的資源目錄下
2.放大鏡css文件可以在Magnifier.js中修改(默認(rèn)是自動(dòng)加載的可以不理會(huì))
layui.link('../Magnifier/css/MangniFier.css'); 3.插件定義方法有所改變，請(qǐng)悉知，如下:
layui.config({
base: '../Magnifier/' //假設(shè)這是你存放拓展模塊的根目錄
}).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'),<!--預(yù)覽圖容器（必須）-->
});
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
