Javascript 使用；变换：缩放（）；作为缩放功能，添加定位

我想使用

transform:scale（）

作为缩放功能。但是我还需要通过移动鼠标光标来改变缩放的位置。如果缩放区域与图像一样大，则效果最好

一些代码：

$（文档）.ready（函数（）{
$（'img'）。悬停（函数（）{
$（“img”）.addClass（“缩放”）；
}，函数（）{
$（“img”）.removeClass（'zoom'）；
});
});
.image\u区域{
宽度：50vw；
高度：50小时；
溢出：隐藏；
}
.img{
宽度：自动；
最大宽度：100%；
高度：自动；
最大高度：100%；
}
.zoom{
过渡：0.1s变换线性；
变换：尺度（5）；
}

html

JS

更新：
这是您的
谢谢！是否可以在没有背景图像的情况下执行此操作？我用jQuery加载图像，很难获得两次。告诉我如何用jq加载图像。然后我可以想出一个解决方案，一般来说就是这样：–我需要灯箱视图的缩放。。。把它移到哪里？嘿！它看起来应该像Monzoor Tamal的解决方案，但没有使用“背景图像”。）
<div class="zoom" onmousemove="imageZoom(event)" style="background-image: url(//res.cloudinary.com/active-bridge/image/upload/slide1.jpg)">
  <img src="//res.cloudinary.com/active-bridge/image/upload/slide1.jpg" />
</div>

div.zoom {
  background-position: 50% 50%;
  position: relative;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}
div.zoom img:hover {
  opacity: 0;
}
div.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
}


function imageZoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}