-

layui引入Magnifier局部选中放大镜模块

  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局部选中放大镜模块代码demo演示

下载地址:layui引入Magnifier局部选中放大镜模块下载
通过上面的阅读,也许你已大致了解如何使用 《layui引入Magnifier局部选中放大镜模块》 了,不过你可能还需要继续阅读后面的文档,尤其是「基础说明」。
那么,欢迎你开始拥抱 layui!愿它能成为你得心应手的 Web 界面解决方案,化作你方寸屏幕前的亿万字节!

layui - 在每一个细节中,用心与你沟通