Javascript 图像缩放放大镜效果在角度模式下无法正常工作

我用angular9创建了一个图像缩放放大效果。我遵循了所有代码的链接

当我运行应用程序时，它的放大镜缩放效果与上面的可运行代码演示完全不同

这是我的密码：-

<app-home></app-home>
<br/><br/>

<style>
 @media only screen and (min-width: 600px) {
* {box-sizing: border-box;}
.img-zoom-container {
  position: relative;
}
.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 75px;
  height: 75px;
}
.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 300px;
  height: 300px;
}



#myhide {
    display: none;
}
.img-zoom-container:hover #myhide {
    display:block;
}
}

@media only screen and (max-width: 600px) {
    .img-zoom-container:hover #myhide {
    display:none;
}
  .img-zoom-container {
  position: relative;
  width: 480px;
  height: 320px;
  overflow: hidden;
}

.imgid {
  position: absolute;
  top: 0;
  left: 0;
}

.imgid img {
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}

.img-zoom-container:hover .imgid img {
  -webkit-transform: scale(1.9);
  transform: scale(1.9);
  overflow:show;
}
  
}

</style>

<div class="row container mt-5 mr-5">
  <div class="col-3 mr-2">
  //other code
  </div>
<div class="col-3">
  <div class="img-zoom-container" onmousenter="showme(this)">
  
        <span><p class="imgid" style="align:center;"><img id="myimage" src="./assets/Images/1.jpg"  srcset="./assets/Images/1.jpg" width="300" height="200"></p></span>
        <span id="myhide" style="float: right;
        position: absolute;
        top: -100px;
        left: 300px;
        width: auto;
        height: 100%;">
        <div id="myresult" class="img-zoom-result"  onmouseleave="hideme(this)" > 
 </div></span>
    </div>

 </div>

<div class="col-6">
   
  //other code
    
 </div>
</div>

<script>
    imageZoom("myimage", "myresult");
  function imageZoom(imgID, resultID) {
    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:*/
    console.log("result.offsetWidth  >>>>>", result.offsetWidth ,"lens.offsetWidth>>>>>>>>>>>",lens.offsetWidth);
  cx = 300 / lens.offsetWidth;
  console.log("result.offsetHeight>>>>>",result.offsetHeight ,"llens.offsetHeighth>>>>>>>>>>>",lens.offsetHeight);
  cy = 300 / lens.offsetHeight;
  /*set background properties for the result DIV:*/
  result.style.backgroundImage = "url('" + img.srcset + "')";
  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);
 // img.addEventListener("mouseenter", bigImg);  
 
  
  
  function bigImg(x) {
    console.log("onmouseenter >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>");
}

function normalImg(x) {
//result.style.display ="none";
     console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>onmousLEAVE");
}


  
  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);
  // console.log("x" , x , "and Y " , y); 
    /*prevent the lens from being positioned outside the image:*/
    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;  } //else{img.addEventListener("mouseenter", bigImg);  }
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight; img.addEventListener("mouseleave",  normalImg);}//else{img.addEventListener("mouseenter", bigImg);  }
    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();
    //console.log("------------------A  left" ,  a ); 
    /*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};
  }
  
}

function hideme(x) {
    //x.style.display = "none";
   
}
function showme(x) {
    //x.style.display = "block";
   
}



</script>




 <router-outlet></router-outlet>

@仅介质屏幕和（最小宽度：600px）{
*{框大小：边框框；}
.img缩放容器{
位置：相对位置；
}
.img变焦镜头{
位置：绝对位置；
边框：1px实心#d4；
/*设置镜头的大小：*/
宽度：75px；
高度：75px；
}
.img缩放结果{
边框：1px实心#d4；
/*设置结果div的大小：*/
宽度：300px；
高度：300px；
}
#牛皮{
显示：无；
}
.img缩放容器：悬停#myhide{
显示：块；
}
}
@仅介质屏幕和（最大宽度：600px）{
.img缩放容器：悬停#myhide{
显示：无；
}
.img缩放容器{
位置：相对位置；
宽度：480px；
高度：320px；
溢出：隐藏；
}
伊姆吉德先生{
位置：绝对位置；
排名：0；
左：0；
}
.imgid img{
-webkit转换：0.6s易用性；
过渡：0.6s缓解；
}
.img缩放容器：hover.imgid img{
-webkit转换：比例（1.9）；
转换：比例（1.9）；
溢出：显示；
}
}
//其他代码

//其他代码
图像缩放（“我的图像”、“我的结果”）；
函数imageZoom（imgID、resultID）{
var-img，lens，result，cx，cy；
img=document.getElementById（imgID）；
结果=document.getElementById（resultID）；
/*创建镜头：*/
lens=document.createElement（“DIV”）；
镜头属性（“类”、“img变焦镜头”）；
/*插入镜头：*/
img.parentElement.insertBefore（镜头，img）；
/*计算结果DIV和镜头之间的比率：*/
console.log（“result.offsetWidth>>>>”，result.offsetWidth，“lens.offsetWidth>>>>>>”，lens.offsetWidth>>>>）；
cx=300/镜头。偏移网络宽度；
console.log（“result.offsetHeight>>>>”，result.offsetHeight，“llens.offsetHeight>>>>>>>”，lens.offsetHeight）；
cy=300/镜头。离视；
/*设置结果DIV的背景属性：*/
result.style.backgroundImage=“url（'”+img.srcset+“）”；
result.style.backgroundSize=（img.width*cx）+“px”+（img.height*cy）+“px”；
/*当有人将光标移动到图像或镜头上时，执行一项功能：*/
lens.addEventListener（“mousemove”，moveLens）；
img.addEventListener（“mousemove”，moveLens）；
/*以及触摸屏：*/
lens.addEventListener（“触摸移动”，moveLens）；
img.addEventListener（“触摸移动”，移动镜头）；
//img.addEventListener（“mouseenter”，bigImg）；
函数bigImg（x）{
console.log（“onMouseCenter>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>”；
}
函数normalImg（x）{
//result.style.display=“无”；
控制台日志（“>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>；
}
功能镜头（e）{
变量pos，x，y；
/*防止在图像上移动时可能发生的任何其他操作：*/
e、 预防默认值（）；
/*获取光标的x和y位置：*/
pos=getCursorPos（e）；
/*计算透镜的位置：*/
x=位置x-（镜头偏移宽度/2）；
y=位置y-（镜头离视/2）；
//控制台日志（“x”，x，“和Y”，Y）；
/*防止镜头位于图像外部：*/
如果（x>img.width-lens.offsetWidth）{x=img.width-lens.offsetWidth；}//否则{img.addEventListener（“mouseenter”，bigImg）；}
如果（x<0）{x=0；}
如果（y>img.height-lens.offsetHeight）{y=img.height-lens.offsetHeight；img.addEventListener（“mouseleave”，normalImg）；}//否则{img.addEventListener（“mouseenter”，bigImg）；}
如果（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（）；
//console.log（“-----------------A左”，A）；
/*计算光标相对于图像的x和y坐标：*/
x=e.pageX-a.左；
y=e.pageY-a.top；
/*考虑任何页面滚动：*/
x=x-window.pageXOffset；
y=y-window.pageYOffset；
返回{x:x，y:y}；
}
}
函数hideme（x）{
//x、 style.display=“无”；
}
函数showme（x）{
//x、 style.display=“block”；
}

---

当我将鼠标悬停时，我发现右侧有一个阴影边框。但这是出乎意料的。我不想要框阴影。

对于没有jQuery的角度方法，请这样看：？角度增加了您不需要的开销。@jqueryHtmlCSS，通常使用角度和jQuery这不是一个好主意，但当然，您可以使用您觉得更舒服的技术来解决问题