layui點擊放大圖片/旋轉

//原圖片
<img src="@(Model.Img)" style="width: 100px; height: 100px;" onclick="amplificationImg('@(Model.Img)')" />

//放大的圖片
<img alt="" style="display:none;width:500px;height:500px;" id="displayImg" src="" />

<script>
    function amplificationImg(url) {
        $("#displayImg").attr("src", url);
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            shadeClose: true,
            area: ['630px','600px'], //寬高
            content: "<img src=" + url + " style='width: 500px; height: 500px;' />"
        });
    }
</script>

 

2.放大/旋轉

   <div id="layer-photos-demo" class="layer-photos-demo"><img layer-pid="圖片id，可以不寫" layer-src="/9e8.png" width="100" height="100" src="/8.png" alt="圖片名">
   </div>

      layer.photos({
            photos: '#layer-photos'
            , anim:3, //0-6的選擇，指定彈出圖片動畫類型，默認隨機（請注意，3.0之前的版本用shift參數）
            closeBtn: 1,
            tab: function () {
                num = 0;
                $("#layui-layer-photos").append('<div class="icon" style="position:relative;width:100%;text-align:center;top:-133px;cursor:pointer;">\n' +
                    '\t\t<img src="xz.png" style="width:30px;height30px;">\n' +
                    '\t</div>');
            }
        }); 


   $(document).on("click", ".icon img", function (e) {
            num = (num + 90) % 360;
            $(".layui-layer.layui-layer-page.layui-layer-photos").css('transform', 'rotate(' + num + 'deg)');

            //$(".layui-layer-phimg img").css('transform','rotate('+num+'deg)');此處只能旋轉圖片
        });