చిత్ర మాగ్నిఫైర్ సృష్టించడం ఎలా ఉంటుంది:

చిత్ర మాగ్నిఫైర్ సృష్టించడానికి తెలుసుకోండి.

చిత్ర మాగ్నిఫైర్ సృష్టించండి

మొదటి చర్య - HTML జోడించండి:

<div class="img-magnifier-container">
  <img id="myimage" src="img_girl.jpg" width="600" height="400" alt="Girl">
</div>

రెండవ చర్య - CSS జోడించండి:

కంటైనర్ ప్రత్యేకంగా పొందుపరచబడాలి.

* {box-sizing: border-box;}
.img-magnifier-container {
  position: relative;
}
.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /* చిత్ర మాగ్నిఫైర్‌యొక్క పరిమాణాన్ని సెట్: */
  width: 100px;
  height: 100px;
}

మూడవ దశ - జావాస్క్రిప్ట్‌ను జోడించండి:

function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /* మాగ్నిఫైర్‌ను సృష్టించు: */
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /* మాగ్నిఫైర్‌ను జోడించు: */
  img.parentElement.insertBefore(glass, img);
  /* మాగ్నిఫైర్‌యొక్క బ్యాక్‌గ్రౌండ్ అటీరిబ్యూట్స్ సెట్: */
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  /* వినియోగదారు చిత్రంపై మాగ్నిఫైర్‌ను జరిపించే ఫంక్షన్: */
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  /* టచ్‌స్క్రీన్‌కు కూడా అనువందిస్తుంది: */
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  ఫంక్షన్ మొవ్మాగ్నిఫైర్(ఈపి) {
    వార్ పోస్, x, y;
    /* చిత్రంపై జరిపే ఏదైనా ఇతర కార్యకలాపాలను నిరోధించు: */
    e.preventDefault();
    /* కూర్సర్ యొక్క x మరియు y స్థానాలను పొందుటకు: */
    పోస్ = గెట్కర్సర్పోసిషన్(ఈపి);
    x = పోస్.క్;
    y = పోస్.య్;
    /* పెద్దదిచేయు కప్పాన్ని చిత్రం బయటన ఉంచు: */
    ఇఫ్ (x > ఐమేజ్.వైడ్త్ - (వైడ్త్ / జూమ్)) {x = ఐమేజ్.వైడ్త్ - (వైడ్త్ / జూమ్);}
    ఇఫ్ (x < వైడ్త్ / జూమ్) {x = వైడ్త్ / జూమ్;}
    ఇఫ్ (y > ఐమేజ్.హైత్ - (హైత్ / జూమ్)) {y = ఐమేజ్.హైత్ - (హైత్ / జూమ్);}
    ఇఫ్ (y < హైత్ / జూమ్) {y = హైత్ / జూమ్;}
    /* పెద్దదిచేయు కప్పాన్ని స్థానాన్ని నిర్వహించు: */
    గ్లాస్.స్టైల్.లెఫ్ట్ = (x - వైడ్త్) + "px";
    గ్లాస్.స్టైల్.టాప్ = (y - హైత్) + "px";
    /* పెద్దదిచేయు కప్పాన్ని "చూసిన" అంశాలను చూపుతుంది: */
    గ్లాస్.స్టైల్.బ్యాక్గ్రౌండ్పోసిషన్ = "-" + ((x * జూమ్) - వైడ్త్ + బియార్డ్వైడ్త్) + "px -" + ((y * జూమ్) - హైత్ + బియార్డ్వైడ్త్) + "px";
  }
  ఫంక్షన్ గెట్కర్సర్పోసిషన్(ఈపి) {
    వార్ ఎ, x = 0, y = 0;
    e = e || విండోయొక్క ఇవెంట్;
    /* ఐమేజ్ యొక్క x మరియు y స్థానాలను పొందుటకు: */
    a = ఐమేజ్ యొక్క రెండుసారి అడుగులు పొందుటకు();
    /* కార్యక్రమించు కూర్సర్ యొక్క x మరియు y కోఆర్డినేట్లు: */
    x = ఈపి పేజీయొక్క యొక్క ఎడమ స్థానం - ఎ లెఫ్ట్;
    y = ఈపి పేజీయొక్క యొక్క పైని స్థానం - ఎ టాప్;
    /* పేజీ స్క్రాల్ పరిగణనలోకి: */
    x = x - విండోయొక్క పేజీ స్క్రాల్ ఆఫ్సెట్;
    y = y - విండోయొక్క పేజీ స్క్రాల్ ఆఫ్సెట్;
    రిటర్న్ {x : x, y : y};
  }
}

నాలుగవ చర్య - పెద్దదిచేయు ఫంక్షన్ ప్రారంభించు:

<script>
/* పెద్దదిచేయు ఫంక్షన్ అమలుపరచు: */
మగ్నిఫై("మైయ్ఇమేజ్", 3);
/* 指定图像的 id 和放大镜的强度： */

亲自试一试