folder Tahribat.com Forumları
linefolder Html - CSS - XML - JavaScript - Ajax
linefolder Javascript İle Fareyi (Mouse) Takip Eden Nesne Örneği



Javascript İle Fareyi (Mouse) Takip Eden Nesne Örneği

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    camarade
    ontedi
    ontedi's avatar
    Kayıt Tarihi: 04/Eylül/2005
    Erkek

    Bu küçük uygulamamızda JavaScript kullanarak fareyi (mouse) takip eden bir nesne örneklemesi yapacağız.

    Şüphesiz ki JavaScript'in gücü gittikçe artmaktadır. Çeşitli yerlerde kullanım alanı göstermekte olduğunu görüyoruz. Gün geçtikçe artan bu öneme kayıtsız kalmamak adına arada sıra küçük uygulamalar ile makale yayınlıyorum.

    Bu makalemizde etkileşimli JavaScript örneği işleyeceğiz. Eskiden Flash ile yapılan ilk örneklerin vazgeçilmezi olan "Mouse Takip Eden Nesne" örneğinin benzerini JavaScript dilinde yapacağız.

    Küçük bir arayüz hazırlayalım.

    HTML Betikleri

    <div class="kapsul">
        <div class="gezgin"></div>
    </div>

    Arayüzü hazırladık, şimdi ise bunu CSS ile renklendirelim.

    CSS Betikleri

    .kapsul{width:400px;height:300px;position:relative;background:#ddd;margin:20px auto;}
    .gezgin{width:20px;height:20px;background:red;position:absolute;left:0;top:0;border-radius:50%;}

    Oluşan Arayüz

     

    Yaptığımız arayüzü CSS ile renklendirdikten sonra mouse ile her hareketi yakalayıp kapsul içindeki nesneyi (gezgin) mouse'ın koordinatlarına göre hareket etmesini sağlayalım.

    JavaScript Betikleri

    var gezgin = document.querySelector('.gezgin');
    let kapsul = document.querySelector(".kapsul"); 
    kapsul.addEventListener("mousemove", function(event) 
      { 
        let alan = kapsul.getBoundingClientRect(); 
        let dblMouseX = event.clientX - alan.left; 
        let dblMouseY = event.clientY - alan.top; 
        let dblGezginX = gezgin.offsetLeft;
        let dblGezginY = gezgin.offsetTop;
        let dblFarkX = dblMouseX - dblGezginX;
        let dblFarkY = dblMouseY - dblGezginY;
        let dblKatsayi = 0.08;
        gezgin.style.left = (dblGezginX + (dblFarkX * dblKatsayi)) + "px";
        gezgin.style.top = (dblGezginY + (dblFarkY * dblKatsayi)) + "px";
      }
    );


    İyi takipli günler
    Kaynak: https://www.ontedi.com/javascript/javascript-ile-fareyi-mouse-takip-eden-nesne-ornegi

    ontedi tarafından 10/Nis/20 00:43 tarihinde düzenlenmiştir

    Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.
Toplam Hit: 1280 Toplam Mesaj: 1
javascript takip nesne takibi follow