layui 怎么设置点击图片放大_layui图片如何放大

先看效果图

第一步：

html 代码：创建滑块

相关推荐：《layui框架教程》

第二部：javascript 代码var ysw = 0; //记录图片原始宽度

var ysh = 0; //记录图片原始高度

layui.use('slider', function(){

var $ = layui.$

,slider = layui.slider;

slider.render({

elem: '#slideys'

,value: 0 //初始值

,theme: '#1E9FFF'

,step: 1 //步长

,min: -10 //最小值

,max: 10 //最大值

,showstep: true //开启间隔点

,change: function(value){

if(ysw ==0 || ysh == 0){

return;

}

var pjw = ysw/20;

var pjh = ysh/20;

var img = $("#dximg"); //图片ID

if(img!=null){

var w = Math.round(ysw+(pjw*value));

var h = Math.round(ysh+(pjh*value));

$(img).css("width", w );

$(img).css("height", h );

}

}

});

});

登录工具网进行在线图片尺寸转换。