Javascript Büyüteç Uygulaması

Saf Javascript ve CSS kullanarak basit bir büyüteç programı yazdım.

Javascript Büyüteç Kodları:

HTML Kodu;

<div id="resimKabi">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg" />
  <div id="buyutec"></div>
</div>

CSS Kodu;

#resimKabi {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  overflow: hidden;
}
#resimKabi img {
  display: block;
  width: 100%;
  height: auto;
}
#buyutec {
  width: 100px;
  height: 100px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg);
  background-repeat: no-repeat;
  border-radius: 50%;
  border: solid 2px #fff;
  position: absolute;
}

Javascript Kodu 

window.onload = function () {

        boyutla();

        takipEt();

        var eni, boyu, kutuEn, kutuBoy, hesEn, hesBoy;

        var buyutec = document.getElementById('buyutec');

        var rsmKap = document.getElementById('resimKabi');

        window.addEventListener("resize", boyutla);

        buyutec.style.backgroundSize = '3000% 3000%';

        function boyutla() {

            var kutum = document.getElementById('resimKabi');

            var urlAdr = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg';

            var resm = new Image();

            resm.src = urlAdr;

            eni = resm.width;

            boyu = resm.height;

            kutuEn = kutum.offsetWidth;

            kutuBoy = kutum.offsetHeight;

            hesEn = (eni / kutuEn) * 2.2;

            hesBoy = (boyu / kutuBoy) * 3.5;

        }

        function takipEt() {

            var x = null;

            var y = null;

            document.getElementById('resimKabi').addEventListener('mousemove', onMouseUpdate, false);

            document.getElementById('resimKabi').addEventListener('mouseenter', onMouseUpdate, false);

            function onMouseUpdate(e) {

                var konumu = rsmKap.getBoundingClientRect();

                x = e.clientX - konumu.left;

                y = e.clientY - konumu.top;

                buyutec.style.left = (x - 55) + 'px';

                buyutec.style.top = (y - 55) + 'px';

                buyutec.style.backgroundPosition = (-x * hesEn) + 'px ' + (-y * hesBoy) + 'px';

            }

        }

    }

Bu kodların sonucu;

Kodlar Üzerinde Oynama Yapmak İsterseniz Buraya Bakabilirsiniz

See the Pen Javascript Büyüteç Uygulaması (JS Magnifier) by Turgut Arslan (@draguth) on CodePen.

Saygılarımla...
Turgut Arslan