类似微信电脑版中点击图片放大,并且可以用滚轮放大缩小图片的插件,有没有知道的??

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

阅读 4.9k
4 个回答

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

https://github.com/nzbin/magnify

可以试下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";
    });
}
新手上路,请多包涵

这个git下载怎么看不到demo啊,求指导

推荐问题