layui 第三方組件平臺

返回首頁 發(fā)布組件

用于圖片的放大鏡效果

創(chuàng)建:2018-8-28

文檔

效果圖



使用方法:
1.下載文件后,把Magnifier整個文件放在你的資源目錄下
2.放大鏡css文件可以在Magnifier.js中修改(默認(rèn)是自動加載的可以不理會)
layui.link('../Magnifier/css/MangniFier.css');

3.插件定義方法有所改變,請悉知,如下:
      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

下載

立即下載 去碼云下載
該擴(kuò)展組件由第三方用戶主動投遞,并由其自身進(jìn)行維護(hù),本站僅做收集。