mousemove

Web sitenize eğlenceli çalışmalar eklemek için  kullanımı kolay bir örnek. Mouseyi  sürekli takip eden yazılar, resimler, videolar veya çerçeveler eklemeniz mümkün. Sadece süs  için kullanılabilir başka da hiç bir işe yaramayan bir çalışma. Yani kalkıpta bir çerçeve hazırlayıp bu çerçevenin içine  de bir menü eklemek isterseniz üyeleriniz mouse ile menüdeki kategorilere  tıklayamaz.

Demo olarak mouseyi takip eden bir resim  ve youtube üzerinden yayınlanan bir video ekledim. Telif  hakkı olabilir diye video bağlantısı bozuk daha doğrusu bağlantı linkine fazladan bir kaç tane karakter daha ekledim buradan çalışmaması için.
 Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

jQuery  url adresi :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 JavaScript : 

Eklemek istediğiniz  nesne adı aşağıdaki gibi olmalıdır.  Benim eklediğim  .mintik  adı  altında bir css  sınıf.

$('.sınıf-adı')

Bir resmin  mouseyi takip etmesini istiyorsanız <img kodundan sonra  class=’sınıf -adı‘  eklemeniz gerekiyor.  Bu şekilde  yapmazsanız  JavaScript kod hangi  resmi seçeceğini  karıştırır  ve yanlış bir çalışma yamış olursunuz.

Mouseyi takip edecek örnek resim kodu :

<img class="sınıf-adı" src="resminiz.png">

Mouseyi takip etmesi  için youtube sitesinden bir  video eklemek istiyorsunuz.  Video paylaşım sitelerinden alacağınız video  adresleri  genellikle iframe  ile  kullanılır

Örnek Youtube  video kodu :

 <iframe  width="640" height="360" src="https://www.youtube.com/embed/videonuz?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

Yine her nesne  seçiminde  yapacağımız gibi yapıyoruz mouseyi takip edecek resimde yatığımız gibi. <iframe kodundan sonra  class=’sınıf-adı’  eklememiz gerekiyor.  <iframe class=’sınıf-adı’

 <iframe class="youtube" width="640" height="360" src="https://www.youtube.com/embed/czmFOcA_Sv4?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

JavaScript Kod : 

Burada  benim kullandığım sınıf  adı  .mintik  olarak geçiyor.  Mouseyi takip  etmesini istediğim html  elementlere  sınıf  adı olarak  mintik  eklemem gerekiyor.

<script type='text/javascript'>//<![CDATA[ 
$(function(){
$(document).mousemove(function(e) {
    $('.mintik').offset({
        left: e.pageX,
        top: e.pageY + 20
    });
});
});//]]>  
</script>
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

Resim için

<img class="mintik" src="resim.png" alt="mintik.com">

Video için

 <iframe class="youtube" width="640" height="360" src="https://www.youtube.com/embed/video?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

 

Demo  sayfasında  kullandığım arkaplan Lea Verou  tarafından hazırlanmış bir  desendir.  Bunun gibi daha bir çok  deseni  ve nasıl kullandığını  buradan inceleyebilirsiniz.


Ali senin düşüncelerini merak ediyor. Bir yorum yaz