先看效果图
第一步:
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 ); } } }); });
登录后复制
登录工具网进行在线图片尺寸转换。
以上就是layui图片如何放大的详细内容,更多请关注【创想鸟】其它相关文章!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。