Image following mouse

By

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 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="http://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. kodundan sonra  class=’sınıf-adı’  eklememiz gerekiyor.