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

9 komentar Untuk JavaScript "No-Click"

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