layer.photos 相册旋转与放大缩小

最新推荐文章于 2024-08-15 11:02:18 发布

kk_star

最新推荐文章于 2024-08-15 11:02:18 发布

阅读量2.8k

点赞数

分类专栏： layer 文章标签： javascript

本文链接：https://blog.csdn.net/kk_star/article/details/119675671

版权

本文介绍了如何使用JavaScript在图层中添加旋转按钮，点击按钮实现图片的旋转操作。同时，通过鼠标滚轮交互，可以对图片进行放大和缩小，增强用户体验。

摘要由CSDN通过智能技术生成

1.相册旋转：

图层中新增一个旋转按钮

layer.photos({
    photos: window['attach_albumlist'],
    anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    tab:function () {
        num=0;
        $("#layui-layer-photos").parent().append('<div style="position:relative;width:100%;text-align:center;cursor:pointer;">\n' +
            '\t\t<button id="xuanzhuan"  style="height30px;">旋转\t</button>\n' +
            '\t</div>');
    }
});

点击按钮调用旋转方法：

$(document).on("click", "#xuanzhuan", function(e) {
    num = (num+90)%360;
    $(".layui-layer.layui-layer-page.layui-layer-photos").css('background','black');//旋转之后背景色设置为黑色，不然在旋转长方形图片时会留下白色空白
    $("#layui-layer-photos").css('transform','rotate('+num+'deg)');
    
});</