js 图片放大缩小旋转

qq_28744021

于 2024-04-18 16:42:41 发布

阅读量143

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_28744021/article/details/137927338

版权

 $('.imgBox').html("<div class='enlargeImg_wrapper'>" +
            "<div class='d-flex' style='z-index:inherit; position:absolute; left: 50%; transform: translateX(-50%);'>" +
            "<div class='text-center'><button class='btn btn-normal mt-3 mb-3' onclick='picRotate()'>旋转</button></div>" +
            "<div class='text-center'><button class='btn btn-normal ml-3 mt-3 mb-3' onclick='big()'>放大</button></div>" +
            "<div class='text-center'><button class='btn btn-normal ml-3 mt-3 mb-3' onclick='small()'>缩小</button></div>" +
            "<div class='text-center'><button class='btn btn-normal ml-3 mt-3 mb-3' onclick='closeFade()'>关闭</button></div></div>" +
            "<div class='text-center' style='margin-top: 6%'><img id='staffImage' /></div>" +
            "</div>");
        var imgSrc = $(this).attr('src');
        $("#staffImage").attr("src",imgSrc);
        $('.enlargeImg_wrapper').fadeIn(200);



var thisData = { x: 0, y: 0, zoom: 1, rotate: 0 }

//图片旋转
function picRotate(){
    thisData.rotate = thisData.rotate + 90
    $('#staffImage').css('transform', `rotate(${thisData.rotate}deg) scale(${thisData.zoom})`)
}

//放大图片比例
function big(){
    thisData.zoom = thisData.zoom + 0.2
    $('#staffImage').css('transform', `rotate(${thisData.rotate}deg) scale(${thisData.zoom})`)
}

//缩小图片比例
function small(){
    thisData.zoom = thisData.zoom - 0.2
    if (thisData.zoom < 0.2) thisData.zoom = 0.2
    $('#staffImage').css('transform', `rotate(${thisData.rotate}deg) scale(${thisData.zoom})`)
}

//关闭
function closeFade(){
    //重置属性
    thisData = { x: 0, y: 0, zoom: 1, rotate: 0 }
    $('.enlargeImg_wrapper').fadeOut(200).remove();
}