javascript - The image zoom magnifier effect does not work properly in Angular

Question

I created an image zoom magnifier effect in angular9. I followed this link of all code. https://codepen.io/piclaunch/pen/QrLWNx

When I run my application, it's magnifier zoom effect does nothing like the above runnable code demonstration.

Here is my code:-

<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>

When I hover the mouse, I find a shadow border on the right side. But this is unexpected. I don't want box-shadow.

question from:https://stackoverflow.com/questions/65713927/the-image-zoom-magnifier-effect-does-not-work-properly-in-angular

Answer 1

Waitting for answers