实现鼠标滚动图片的放大和缩小

382 阅读1分钟
//滑动滚轮实现图片的放大和缩小 
//$preViewImg为目标图片jQuery对象 
$preViewImg.on("mousewheel", function (e) { 
    e.preventDefault(); 
    var deg = this.getPreviewPicDeg(); //获取当前图片的旋转角度 
    var scale = this.getPreviewPicScale(); //获取当前图片的放大或者缩小值 
    var del = 0; 
    if(e.originalEvent.wheelDelta) { 
        del = e.originalEvent.wheelDelta; 
    }else if(e.originalEvent.detail) { 
        del = e.originalEvent.detail * -1; 
    } 
    
    if(del > 0) { 
        // 放大 
        $preViewImg.css('transform', 'translate3d(0px, 0px, 0px) scale3d(' + 1.2 * scale + ', ' + 1.2 * scale + ', 1) rotate(' + deg + 'deg)'); 
    }else if(del < 0) { 
        // 缩小 
        $preViewImg.css('transform', 'translate3d(0px, 0px, 0px) scale3d(' + 0.8 * scale + ', ' + 0.8 * scale + ', 1) rotate(' + deg + 'deg)'); 
    } 
}); 

//获取图片当前的旋转角度 
function getPreviewPicDeg() { 
    var preViewImgDom = $(window.top.document.body).find('#preViewImg'); 
    var values = preViewImgDom.css('transform').split('(')[1].split(')')[0].split(','); 
    var deg = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI)); return deg; 
};

//获取图片当前的放大或者缩小值 
function getPreviewPicScale() { 
    var preViewImgDom = $(window.top.document.body).find('#preViewImg'); 
    var values = preViewImgDom.css('transform').split('(')[1].split(')')[0].split(','); 
    var scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]); return scale; 
}; 

//放大图片 
$preViewImg.css('transform', 'translate3d(0px, 0px, 0px) scale3d(' + 1.2 * scale + ', ' + 1.2 * scale + ', 1) rotate(' + deg + 'deg)'); 
//缩小图片 
$preViewImg.css('transform', 'translate3d(0px, 0px, 0px) scale3d(' + 0.8 * scale + ', ' + 0.8 * scale + ', 1) rotate(' + deg + 'deg)');