JavaScript "No-Click"

JavaScript "No-Click"
Javascript "No-Click" adalah javascript buat HTML yang sangat menarik racikan Gerrard Fernando, Script ini berjalan jika panah mouse kita mendekati tulisan atau gambar yang diberi script "No-Click" pada HTML bergerak menjauhi mouse. bagi yang penasaran lihat demonya dibawah dan gerakkan panah mouse anda ke tulisan atau gambar. oh iya, maaf saya belum mencoba untuk blog, silahkan kalian para blogger untuk bereksplorasi sendiri.


Kode Javascript, tambahkan ini diatas kode </head> HTML anda
<script src="http://lorddayz.googlecode.com/files/no-click.js" type="text/javascript"></script>
berikut source kodenya dari Javascript diatas
/* ============================= 
        ===== no click ===== 
script by Gerard Ferrandez - ge1doot - April 28, 2007 
  ========================= */ 
 
var xm = 0; 
var ym = 0; 
document.onmousemove = function(e){ 
 if (window.event) e=window.event; 
 xm = e.clientX; 
 ym = e.clientY; 
} 
 
var noclick = { 
 O : [], 
 run : function() { 
  for (var i = 0, o; o = noclick.O[i]; i++) 
   o.anim(); 
 }, 
 resize : function() { 
  for (var i = 0, o; o = noclick.O[i]; i++) 
   o.resize(); 
 }, 
 init : function(){ 
  for (var i = 0, o; o = document.body.getElementsByTagName("*")[i]; i++){ 
   if (o.className.indexOf('noclick') >= 0) { 
    o.l0 = o.style.left; 
    o.t0 = o.style.top; 
    o.resize = function() { 
     this.style.left = this.l0; 
     this.style.top = this.t0; 
     for (var nx = 0, ny = 0, o = this.offsetParent; o != null; o = o.offsetParent) 
      nx += o.offsetLeft, ny += o.offsetTop; 
     this.x0 = nx; 
     this.y0 = ny; 
     this.ox = this.offsetLeft; 
     this.oy = this.offsetTop; 
     this.rx = (this.style.position == 'absolute') ? 0 : this.ox; 
     this.ry = (this.style.position == 'absolute') ? 0 : this.oy; 
     this.px = this.ox; 
     this.py = this.oy; 
     this.nw = this.offsetWidth / 2; 
     this.nh = this.offsetHeight / 2; 
     this.dp = Math.max(this.offsetWidth, this.offsetHeight); 
    } 
    o.anim = function() { 
     var xmm = xm - this.x0 - this.nw; 
     var ymm = ym - this.y0 - this.nh; 
     var dx = xmm - this.px; 
     var dy = ymm - this.py; 
     var d = Math.sqrt(dx * dx + dy * dy); 
     this.px += ((this.ox - this.px) * .2); 
     this.py += ((this.oy - this.py) * .2); 
     if(d < this.dp && d > 0 ){ 
      this.px = xmm - (this.dp * (xmm - this.px) / d); 
      this.py = ymm - (this.dp * (ymm - this.py) / d); 
     } 
     this.style.left = Math.round(this.px - this.rx) + 'px'; 
     this.style.top  = Math.round(this.py - this.ry) + 'px'; 
    } 
    o.resize(); 
    this.O.push(o); 
   } 
  } 
  setInterval(noclick.run, 16); 
 } 
} 
 
 
onload = function () { 
 noclick.init(); 
} 
 
function resize() { 
 noclick.resize(); 
} 
onresize = resize;
itu belum selesai sobat :D
sekarang cara pengaplikasiannya,
Di web DEMO diatas saya menggunakan kode seperti ini untuk gambar.
<img class="noclick" src="http://e-kids.ro/dw3.jpg" style="position:absolute;left:-42px;top:-42px;z-index:0">
Sedangkan Untuk Tulisan, kodenya seperti ini
<span class="noclick" style="position:relative;font-weight:bold;">AYOO BERGOYAAAANG</span>
simple, hanya dengan menambahkan kode class="noclick" pada image atau text yang anda inginkan.
kode diatas hanya contoh dari HTML yang saya buat, silahkan anda develop sendiri ^^

Happy Blogging Sobat \m/
Bagikan ke Teman ›
om-dayz lintasme
om-dayz facebook share
om-dayz Tweet Button
om-dayz digg Submitter

10 komentar Untuk JavaScript "No-Click"

  1. Keren infonya Om....
    Ditunggu nih kunjungan baliknya...

    BalasHapus
  2. @ Ardi > Makasih dah berkunjung ^^

    BalasHapus
  3. http://thehit-ebook.blogspot.com/2011/01/forex-technical-analysis-fundamentals.html

    BalasHapus
  4. asik ada mainan script baru..
    thx infonya :D

    BalasHapus
  5. @Bina : silahkan dicoba sob ^^

    BalasHapus
  6. :ngakak liat demo-nya mas lagu nya enak.....

    BalasHapus
  7. benar - benar banyak tutorial keren disini...

    BalasHapus

Follow Me On Twitter Facebook Fanspage Circle Me On Google Plus Subscribe to RSS Feed