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)');此处只能旋转图片
        });
       

 

posted @ 2020-10-16 15:13  阳光下的行者  阅读(3228)  评论(0编辑  收藏  举报