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">
<span class="noclick" style="position:relative;font-weight:bold;">AYOO BERGOYAAAANG</span>
kode diatas hanya contoh dari HTML yang saya buat, silahkan anda develop sendiri ^^
Happy Blogging Sobat \m/
Terima Kasih telah membaca artikel JavaScript "No-Click" dengan permalink http://om-dayz.blogspot.com/2011/08/javascript-no-click.html yang Diposting oleh Impotensia pada 18.24. Deskripsi artikel ini adalah: JavaScript "No-Click", Tutorial Blogspot Terbaru, JavaScript "No-Click", dan Ratingnya sebesar 5. Semoga Artikel JavaScript "No-Click" bermanfaat bagi Visitor Blog ini.
Keren infonya Om....
BalasHapusDitunggu nih kunjungan baliknya...
@ Ardi > Makasih dah berkunjung ^^
BalasHapusblogwalking n cium
BalasHapusmakasih udah berkunjung :D
BalasHapusasik ada mainan script baru..
BalasHapusthx infonya :D
@Bina : silahkan dicoba sob ^^
BalasHapus:ngakak liat demo-nya mas lagu nya enak.....
BalasHapusbruakakakkakaka :v
BalasHapusbenar - benar banyak tutorial keren disini...
BalasHapus