通过layui组件的滑动块实现控制图片放大缩小功能！

先看效果图

html 代码&＃xff1a;创建滑块

//Javascript 代码

var ysw &＃61; 0;   //记录图片原始宽度
var ysh &＃61; 0;   //记录图片原始高度
var setimgpath &＃61; "";
layui.use(&＃39;slider&＃39;, function(){
     var $ &＃61; layui.$
      ,slider &＃61; layui.slider;
     slider.render({
            elem: &＃39;#slideys&＃39;
             ,value: 0 //初始值
             ,theme: &＃39;#1E9FFF&＃39;
            ,step: 1 //步长
            ,min: -10 //最小值
            ,max: 10 //最大值
            ,showstep: true //开启间隔点
            ,change: function(value){
                if(ysw &＃61;&＃61;0 || ysh &＃61;&＃61; 0){
                    return;
                }
                var pjw &＃61; ysw/20;
                var pjh &＃61; ysh/20;
                var img &＃61;  $("#dximg");  //图片ID
                if(img!&＃61;null){
                    var w &＃61; Math.round(ysw&＃43;(pjw*value));
                    var h &＃61; Math.round(ysh&＃43;(pjh*value));
                    $(img).css("width", w );  
                    $(img).css("height", h ); 
                }
              }
          });
    });

目前此功能已经被做到我的工具网去了

查看地址:http://www.yzcopen.com/img/imgdx