1、先看效果图
2、第一步：html 代码：创建滑块 <div id="slideys" class="demo-slider"></div>
3、第二部：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 ); } } }); });
4、目前此功能已经被做到我的工具网去了如下图
