天天看點

滑鼠滾輪放大圖檔

滑鼠滾輪放大圖檔 -JS

//以滑鼠位置為中心的圖檔滾動放大縮小

//以滑鼠位置為中心的圖檔滾動放大縮小
$(document).on("mousewheel",".layui-layer-photos",function(ev){
    var oImg = this;
    var ev = event || window.event;//傳回WheelEvent
    //ev.preventDefault();
    var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0;
    var ratioL = (ev.clientX - oImg.offsetLeft) / oImg.offsetWidth,
        ratioT = (ev.clientY - oImg.offsetTop) / oImg.offsetHeight,
        ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
        w = parseInt(oImg.offsetWidth * ratioDelta),
        h = parseInt(oImg.offsetHeight * ratioDelta),
        l = Math.round(ev.clientX - (w * ratioL)),
        t = Math.round(ev.clientY - (h * ratioT));
    $(".layui-layer-photos").css({
        width: w, height: h
        ,left: l, top: t
    });
    $("#layui-layer-photos").css({width: w, height: h});
    $("#layui-layer-photos>img").css({width: w, height: h});
});