layui-Magnifier项目介绍 基于layui的放大镜插件 使用方法 1.下载文件后,把Magnifier整个文件放在你的资源目
layui-Magnifier项目介绍
基于layui的放大镜插件
使用方法
1.下载文件后,把Magnifier整个文件放在你的资源目录下 2.放大镜css文件可以在Magnifier.js中修改(默认是自动加载的可以不理会)
layui.link('../Magnifier/css/MangniFier.css');
插件定义方法有所改变,请悉知,如下
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,//缩放比例
});
});
通过上面的阅读,也许你已大致了解如何使用 《layui引入Magnifier局部选中放大镜模块》 了,不过你可能还需要继续阅读后面的文档,尤其是「基础说明」。
那么,欢迎你开始拥抱 layui!愿它能成为你得心应手的 Web 界面解决方案,化作你方寸屏幕前的亿万字节!
layui - 在每一个细节中,用心与你沟通