Posisi Elemen Dinamis Berdasarkan Gerakan Mouse

Tabel Konten
  1. Menampilkan Koordinat Sumbu-X dan Sumbu-Y Pointer Mouse 
    1. jQuery 
    2. HTML 
  2. Set Posisi Elemen Berdasarkan Koordinat Sumbu-X dan Sumbu-Y Pointer Mouse 
    1. jQuery 
    2. HTML 
    3. CSS 
JavaScript Pointer Pos

Menampilkan Koordinat Sumbu-X dan Sumbu-Y Pointer Mouse 

jQuery 

$(window).mousemove(function(e) {
    $('h2.deskripsi').text('X = ' + e.pageX + ', Y = ' + e.pageY);
});

HTML 

<h2 class='deskripsi'>Koordinat...</h2>

Lihat Demo

Set Posisi Elemen Berdasarkan Koordinat Sumbu-X dan Sumbu-Y Pointer Mouse 

jQuery 

$(window).mousemove(function(e) {
    $('#box').css({left:e.pageX, top:e.pageY});
});

HTML 

<div id='box'></div>

CSS 

#box {
  position:absolute; /* Penting! */
  width:150px;
  height:150px;
  background-color:#E77912;
  margin:30px;
}

Lihat Demo

2 Komentar

  • Unknown

    weh bang ini boleh juga nih, buat ngukur lebar dan tinggi mantap lah

  • uki

    Akhirnya dapat juga, :-bd

Komentar telah ditutup.