【Web前端问题】类似微信电脑版中点击图片放大，并且可以用滚轮放大缩小图片的插件，有没有知道的？？

Z时代
2024-01-10
分类：技术分享

有没有哪位知道，类似微信电脑版中点击图片放大，并且可以用滚轮放大缩小图片的js插件，告知一下，谢谢

回答：

推荐一款功能强大的 jQuery 图片查看器插件，具有 Windows 照片查看器的所有功能（缩放，旋转，拖拽等等）

回答：

可以试下Magnifier.js,如果你想写原生Javascript的话可以参考这个demo。其代码如下:

function fnWheel(obj,fncc)
{
    obj.onmousewheel = fn;
    if(obj.addEventListener)
    {
        obj.addEventListener('DOMMouseScroll',fn,false);
    }
    function fn(ev)
    {
        var oEvent = ev || window.event;
        var down = true;
        if(oEvent.detail)
        {
            down = oEvent.detail>0
        }
        else
        {
            down = oEvent.wheelDelta<0
        }
        if(fncc)
        {
            fncc.call(this,down,oEvent);
        }
        if(oEvent.preventDefault)
        {
            oEvent.preventDefault();
        }
        return false;
    }
window.onload=function (){
    var oImg=document.getElementsByTagName("img")[0];
    fnWheel(oImg,function (down,oEvent){
        var oldWidth=this.offsetWidth;
        var oldHeight=this.offsetHeight;
        var oldLeft=this.offsetLeft;
        var oldTop=this.offsetTop;
        var scaleX=(oEvent.clientX-oldLeft)/oldWidth;//比例
        var scaleY=(oEvent.clientY-oldTop)/oldHeight;
        if (down){
            this.style.width=this.offsetWidth*0.9+"px";
            this.style.height=this.offsetHeight*0.9+"px";
        }
        else{
            this.style.width=this.offsetWidth*1.1+"px";
            this.style.height=this.offsetHeight*1.1+"px";
        }
        var newWidth=this.offsetWidth;
        var newHeight=this.offsetHeight;
        this.style.left=oldLeft-scaleX*(newWidth-oldWidth)+"px";
        this.style.top=oldTop-scaleY*(newHeight-oldHeight)+"px";
    });}