Trik Komputer: Javascript Oh Javascript

Javascript merupakan satu jenis script yang memang cukup terkenal dikalangan developer. Karena hasil proses yg didapatkan bisa mencengangkan mata. Bertrilyun-trilyun web script diluaran sana bisa kita lihat dan tentunya dengan trik beraneka ragam pula ;)) Sobat bisa melihat contoh dari pemakaian bentuk Javascript Motion Tween → !
Kalau script sudah menginduk macam (jQuery) biasanya tinggal plugin or snippet dalam mengembangkan apa yg sobat inginkan. Tapi jika javascript enaknya bisa berdiri sendiri, tumpuk jadi satu dengan pemanggilan beragam jadi deh kue apem :) Contoh simpel bagaimana membuat double klik pada mouse bisa langsung ke atas dengan Javascript.

<script type='text/javascript'>
function dblclick() {
   window.scrollTo(0,0)
}
if (document.layers) {
   document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
</script>

Dengan meletakan script diantara/didalam tag <head> ... </head> sobat sudah dapat menggunakan fitur tersebut. Kalau tau shortcut keyboard tinggal pencet saja tombol Home :)) loncat deh ke atas juga :D Menarik kan sob berbicara script, walo saya juga kagak bisa dan tidak mengerti =)) Disinilah peran Beben Koben si bloglang anu ganteng kalem tea berperan...walking² ampe kojor buat berbagi \m/
Mau yang lebih keren javascriptnya :-/

Javascript Link Snowing yaitu menampilkan taburan salju dikala mouse diarahkan terhadap sebuah syntax link.

Javascript Link Snowing

Letakan script diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.9

// Set the maximal-size of your snowflaxes
var snowmaxsize=20

// Set the minimal-size of your snowflaxes
var snowminsize=5

// Set the width of the snowing-zone (pixels)
var snowboxwidth=175


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var marginleft
var margintop
var snowingzone=1
var posleft
var postop
var is_snowing=false
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {     
   rand=Math.floor(range*Math.random())
   return rand
}

function startsnow() {
   is_snowing=true
   if (ie5 || opera) {
       margintop = postop+15
       marginbottom = document.body.clientHeight
       marginleft = posleft
       marginright = posleft+snowboxwidth
   }
   else if (ns6) {
       margintop = postop+15
       marginbottom = window.innerHeight
       marginleft = posleft
       marginright = posleft+snowboxwidth
   }
   var snowsizerange=snowmaxsize-snowminsize
   for (i=0;i<=snowmax;i++) {
       crds[i] = 0;                   
       lftrght[i] = Math.random()*15;      
       x_mv[i] = 0.03 + Math.random()/10;
       snow[i]=document.getElementById("s"+i)
       snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
       snow[i].size=randommaker(snowsizerange)+snowminsize
       snow[i].style.fontSize=snow[i].size+"pt"
       snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
       snow[i].sink=sinkspeed*snow[i].size/5
       snow[i].posx=randommaker(snowboxwidth)+marginleft-2*snow[i].size
       if (ie5 || opera) {
           if (snow[i].posx>=document.body.clientWidth-2*snow[i].size) {
               snow[i].posx=snow[i].posx-snowboxwidth
           }
       }
       if (ns6) {
           if (snow[i].posx>=window.innerWidth-2*snow[i].size) {
               snow[i].posx=snow[i].posx-snowboxwidth
           }
       }
       snow[i].posy=randommaker(marginbottom-margintop)+margintop-2*snow[i].size
       snow[i].style.left=snow[i].posx+"px"
       snow[i].style.top=snow[i].posy+"px"
       snow[i].style.visibility="visible";
    
   }
   movesnow()
}

function stopsnow() {
   is_snowing=false
}

function movesnow() {
   if (is_snowing) {
       for (i=0;i<=snowmax;i++) {
           crds[i] += x_mv[i];
           snow[i].posy+=snow[i].sink
           snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px";
           snow[i].style.top=snow[i].posy+"px"
    
           if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
               snow[i].posx=randommaker(snowboxwidth)+marginleft-2*snow[i].size
               if (ie5 || opera) {
                   if (snow[i].posx>=document.body.clientWidth-2*snow[i].size) {
                       snow[i].posx=snow[i].posx-snowboxwidth
                   }
               }
               if (ns6) {
                   if (snow[i].posx>=window.innerWidth-2*snow[i].size) {
                       snow[i].posx=snow[i].posx-snowboxwidth
                   }     
               }
               snow[i].posy=randommaker(marginbottom-margintop)+margintop-2*snow[i].size
           }
       }
       var timer=setTimeout("movesnow()",50)
   }
   else {
       for (i=0;i<=snowmax;i++) {
           snow[i].style.visibility="hidden";
       }
   }
}

function getcoordinates(e) {
   if (ie5 || opera) {
       posleft=document.body.scrollLeft+window.event.x;
       postop=document.body.scrollTop+window.event.y;
   }
   if (ns6) {
       posleft=e.pageX
       postop=e.pageY
   }
}

for (i=0;i<=snowmax;i++) {
   document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px'>"+snowletter+"</span>")
}
if (browserok) {
   document.onmousemove=getcoordinates
}
//]]>
</script>

Script yg diberi warna silahkan ganti sesuai selera, keterangannya diatasnya tuh (walo bahasa kumpeni) ;)) Mau dihosting itu si java silahkan. Ini script yg sudah Beben minimize Javascript Link Snow Minimize →

Penempatannya saja diperhatikan yah :) Pemakaiannya nanti sobat didalam penulisan sebuah syntax link, hanya perlu membubuhkan sedikit atribut tambahan.
onMouseOver="startsnow()" onMouseOut="stopsnow()"
Nah itu, jadi secara keseluruhan seperti:

<a href="http://beben-koben.blogspot.com" title="Prodigy of Head" onMouseOver="startsnow()" onMouseOut="stopsnow()">Sample Link Writing<a>

So...eazy right! Yah sudahlah jika mau script-script lain yang menarik lagi silahkan deh acak² blog sobat kita ini . See you in my next posted from the bloglang walking² in the house...
Happy Javascript \m/

Trik Komputer

Sabtu, 30 April 2011

Javascript Oh Javascript

Javascript Link Snowing

Tidak ada komentar:

Posting Komentar