layui 第三方组件平台

返回首页 发布组件

仿windows图片查看器,弹窗模式查看图片,支持图片拖拽和滚轮缩放。

更新:2020-12-11 创建:2021-1-15

文档

//HTML示例
<div id="imgDragmove">
<img src="images/1920x1080.jpg" height="200" alt="图片名">
<img src="images/1920x400.jpg" height="200" alt="图片名">
<img src="images/400x900.jpg" height="200" alt="图片名">
<img src="images/400x400.jpg" height="200" alt="图片名">
</div>

//调用示例
layui.config({
base: '../../../layui_exts/' //配置 layui 第三方扩展组件存放的基础目录
}).extend({
dragMove: 'dragMove/dragMove'
}).use(['dragMove'], function(){
var dragMove = layui.dragMove;

//执行示例
dragMove.render({
elem: "#imgDragmove", //指向图片的父容器
layerArea: ["960px","720px"], //窗口的宽高,同layer的area,默认["960px","720px"]
layerShade: 0.6, //遮罩的透明度,同layer的shade,默认0.6
layerMove: false, //触发拖动的元素,同layer的move,这里默认禁止,可设置为'.layui-layer-title'
maxZoom: 1 //图片能放大的最大倍数,默认1倍
});
});
仿windows图片查看器,弹窗模式查看图片,支持图片拖拽和滚轮缩放。暂时不支持窗口的缩放和图片切换。