Javascript 未显示图像缩放

对不起，我的英语

我想尝试一下这个javascript代码

我的结果和他们的不同之处在于，我希望我的结果显示在同一个窗口上

代码是如何生成的

上面

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js">  </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Javascript代码

<script>
      // Initiate zoom effect:
    imageZoom("myresult", "myimage");
</script>

//启动缩放效果：
图像缩放（“我的结果”、“我的图像”）；

及

函数图像缩放（resultID，imgID）{
var-img，lens，result，cx，cy；
img=document.getElementById（imgID）；
结果=document.getElementById（resultID）；
/*创建镜头：*/
lens=document.createElement（“DIV”）；
镜头属性（“类”、“img变焦镜头”）；
/*插入镜头：*/
img.parentElement.insertBefore（镜头，img）；
/*计算结果DIV和镜头之间的比率：*/
cx=结果.offsetWidth/镜头.offsetWidth；
cy=结果.偏视/镜头.偏视；
/*设置结果DIV的背景属性：*/
result.style.backgroundImage=“url（'”+img.src+“）”；
result.style.backgroundSize=（img.width*cx）+“px”+（img.height*cy）+“px”；
/*当有人将光标移动到图像或镜头上时，执行一项功能：*/
lens.addEventListener（“mousemove”，moveLens）；
img.addEventListener（“mousemove”，moveLens）；
/*以及触摸屏：*/
lens.addEventListener（“触摸移动”，moveLens）；
img.addEventListener（“触摸移动”，移动镜头）；
功能镜头（e）{
变量pos，x，y；
/*防止在图像上移动时可能发生的任何其他操作：*/
e、 预防默认值（）；
/*获取光标的x和y位置：*/
pos=getCursorPos（e）；
/*计算透镜的位置：*/
x=位置x-（镜头偏移宽度/2）；
y=位置y-（镜头离视/2）；
/*防止镜头位于图像外部：*/
如果（x>img.width-lens.offsetWidth）{x=img.width-lens.offsetWidth；}
如果（x<0）{x=0；}
如果（y>img.height-lens.offsetHeight）{y=img.height-lens.offsetHeight；}
如果（y<0）{y=0；}
/*设置镜头的位置：*/
lens.style.left=x+“px”；
lens.style.top=y+“px”；
/*显示镜头“看到”的内容：*/
result.style.backgroundPosition=“-”+（x*cx）+“px-”+（y*cy）+“px”；
}
函数getCursorPos（e）{
变量a，x=0，y=0；
e=e | | window.event；
/*获取图像的x和y位置：*/
a=img.getBoundingClientRect（）；
/*计算光标相对于图像的x和y坐标：*/
x=e.pageX-a.左；
y=e.pageY-a.top；
/*考虑任何页面滚动：*/
x=x-window.pageXOffset；
y=y-window.pageYOffset；
返回{x:x，y:y}；
}
}

Html代码

<div class="container">



<div class="grosse-bild">
  <div class="kleine-fenster" id="myresult" > 
    <img src="/kalamulur/Taschen-&-Rucksäcke/Rucksäcke/fenster/photo/113.jpg" width=280 height=280 class="window" id="myimage">
  </div>  
 </div>
</div>

为了证明这一点

这个代码的问题是它什么都不做

---

请有人帮我一下，告诉我哪里错了？

首先试着让小提琴工作：）也许那里没有加载一些LIB。为了只有一个窗口，我会用css（z-index）将它们相互固定。然后，您将从基础图像中获得正确的坐标。也可能您必须将onmouseover事件分配给镜头。因为原始图像被隐藏了。首先尝试使小提琴工作：）可能有些lib没有加载到那里。为了只有一个窗口，我会用css（z-index）将它们相互固定。然后，您将从基础图像中获得正确的坐标。也可能您必须将onmouseover事件分配给镜头。因为原始图像随后被隐藏

function imageZoom(resultID, imgID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
    /*create lens:*/
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
     /*insert lens:*/
  img.parentElement.insertBefore(lens, img);
  /*calculate the ratio between result DIV and lens:*/
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
 /*set background properties for the result DIV:*/
 result.style.backgroundImage = "url('" + img.src + "')";
 result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
 /*execute a function when someone moves the cursor over the image, or the lens:*/
 lens.addEventListener("mousemove", moveLens);
 img.addEventListener("mousemove", moveLens);
 /*and also for touch screens:*/
 lens.addEventListener("touchmove", moveLens);
 img.addEventListener("touchmove", moveLens);
function moveLens(e) {
  var pos, x, y;
 /*prevent any other actions that may occur when moving over the image:*/
  e.preventDefault();
  /*get the cursor's x and y positions:*/
  pos = getCursorPos(e);
  /*calculate the position of the lens:*/
  x = pos.x - (lens.offsetWidth / 2);
  y = pos.y - (lens.offsetHeight / 2);
  /*prevent the lens from being positioned outside the image:*/
  if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
  if (x < 0) {x = 0;}
  if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
  if (y < 0) {y = 0;}
  /*set the position of the lens:*/
  lens.style.left = x + "px";
  lens.style.top = y + "px";
  /*display what the lens "sees":*/
  result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
 }
 function getCursorPos(e) {
  var a, x = 0, y = 0;
  e = e || window.event;
    /*get the x and y positions of the image:*/
  a = img.getBoundingClientRect();
   /*calculate the cursor's x and y coordinates, relative to the image:*/
  x = e.pageX - a.left;
  y = e.pageY - a.top;
    /*consider any page scrolling:*/
  x = x - window.pageXOffset;
  y = y - window.pageYOffset;
  return {x : x, y : y};
 }
}

<div class="container">



<div class="grosse-bild">
  <div class="kleine-fenster" id="myresult" > 
    <img src="/kalamulur/Taschen-&-Rucksäcke/Rucksäcke/fenster/photo/113.jpg" width=280 height=280 class="window" id="myimage">
  </div>  
 </div>
</div>