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

Yorumlar

Bu blogdaki popüler yayınlar

Basit bir HTML / CSS / JS Editörü

Amazon Affiliate Marketingte Yapmamanız Gereken 7 Şey