Look at the renderings first
##Step one: HTML code: Create slider<div id="slideys" class="demo-slider"></div>
layui framework tutorial"
Part 2: javascript codevar 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 ); } } }); });
The above is the detailed content of How to enlarge layui pictures. For more information, please follow other related articles on the PHP Chinese website!