Question

在过去，我遇到http://www.jacklmoore.com/zoom/这是一个很棒的发现，很容易用于各种图像。我正在寻找使用pure-javascript而不是jQuery的抓取缩放功能。有没有Pure-Javascript解决方案？到目前为止，我一直试图这样做没有运气：

使用Javascript：

    var imgSize = 1;
function zoomIn() {
imgSize += 0.1;
document.body.style.imgSize = imgSize + "em";
}
function zoomOut() {
    imgSize -= 0.1;
    document.body.style.imgSize = imgSize + "em";
}

HTML

<img src="picture.png" value="+" onClick="zoomIn()"/>

提前感谢任何有用的提示！

Answer 1

一般的想法是显示较小尺寸的图像（＆＃34;原始＆＃34;），当鼠标悬停在容器上时，显示容器的背景图像。背景图片很大，CSS背景被容器的大小剪裁。跟踪鼠标事件。你必须自己计算测量和数学。

<div id="imageview" style="position:relative;width:300px;height:200px;"
>
  <img src="300x200.jpg" id="original" onmouseover="this.style.display='none';">

</div>

<script>

  document.getElementById('imageview').onmouseover=function(e){
    document.getElementById('original').style.display='none';
    var x,y;
    if (e) {x=e.clientX;y=e.clientY;} else {x=event.clientX; y=event.clientY;}

    document.getElementById('imageview').orgx=x;
    document.getElementById('imageview').orgy=y;

  }

  document.getElementById('imageview').onmousemove=function(e){
    var x,y;
    if (e) {x=e.clientX;y=e.clientY;} else {x=event.clientX; y=event.clientY;}

    var orgx=document.getElementById('imageview').orgx;
    var orgy=document.getElementById('imageview').orgy;

    //now you have x, y, orgx, and org y, so you can do some math
    // ...

    var posx, posy;

    document.getElementById('imageview').backgroundImage='url(600x400.jpg)';
    document.getElementById('imageview').backgroundPosition=-1*posx+'px '+ -1*posy+'px';


  }

</script>

Answer 2

请尝试使用此图像缩放库（由我编写）：https://github.com/kingdido999/zooming

它是在纯JavaScript中实现的，没有额外的依赖。

纯JavaScript图像抓取 - 缩放？

2 个答案: