layui 第三方组件平台

返回首页 发布组件

用于图片的放大镜效果

创建:2018-8-28

文档

效果图



使用方法:
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

下载

立即下载 去码云下载
该扩展组件由第三方用户主动投递,并由其自身进行维护,本站仅做收集。