欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片缩放

程序员文章站 2024-03-24 12:24:34
...

//以鼠标位置为中心的图片滚动放大缩小

$(document).on("mousewheel","#bigimg",function(ev){
    var oImg = this;
    var layerContent=$('.layerContent');
    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));
        with(oImg.style) {
            width = w +'px';
            left = l +'px';
            top = t +'px';
        }  
});