JavaScript "No-Click"

3:24 AM / Unknown / JavaScript, Tutorial,
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/
JavaScript "No-Click" Rating: 4.5 Diposkan Oleh: Unknown
Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe