JQuery ile İmleç/Fare Hareketlerini Kaydetme

Merhaba arkadaşlar,

Bugün sizlere fare/imleç hareketlerini kaydeden bir örnek göstereceğim. 

Bu ne için kullanılabilir?
Ziyaretçilerinizin sayfanızda gezinme hareketlerini kaydederek kullanıcı deneyiminin nasıl olduğunu öğrenebilirsiniz. Bu örnekte sadece farenin sayfa üzerindeki hareketini kaydedeceğiz, siz isterseniz bu event(olay) ı sayfaya girişte çalıştırıp sayfayı kapattığında sonlandırabilirsiniz ve ajax ile hareketleri veritabanına kaydedip sonra izleyebilen bir script yazabilirsiniz.

CSS:

.cursor {
  border-radius: 50%;
  background: red;
  width: 10px;
  height: 10px;
  position: fixed;
  top: 0;
  left: 0;
}

.click {
  border-radius: 50%;
  background: red;
  position: fixed;
  width: 20px;
  height: 20px;
}

HTML:

<button id="kayit">Kayıt</button>
<button id="oynat">Oynat</button>

<div class="cursor" style="display: none"></div>

JS Kodu:

$(function() {
    var move = [];
    $('#kayit').toggle(function() {
    hareket = [];
    $(this).text('Dur');
        $(document).mousemove(function(e) {
            hareket.push({
                x: e.pageX,
                y: e.pageY
            });
        });

    }, function() {
        $(document).off('mousemove');
        $(this).text('Kayıt');
    });

    $('#oynat').click(function() {
        $('.cursor').show();
        var $replay = $('.cursor'),
            pos, i = 0,
            len = move.length,
            t;

        (function anim() {
            pos = hareket[i];
            $replay.css({
                top: pos.y,
                left: pos.x
            });

            i++;

            if (i === len) {
                clearTimeout(t);
                $('.cursor').hide();
            } else {
                t = setTimeout(anim, 10);
            }
        })()

    });
});

Not: Jquery-1.8.3 kütüphanesini import etmeyi unutmayın!

Görüşmek üzere.

Google Plus'da Paylaş

Unknown Hakkında

Bilgisayar Mühendisi, Hobi olarak JS ile ilgileniyor. Eskişehirli bir kardeşiniz.