Kongsi Tuto.. :D (Cursor ada Buih)

 cursor ade buih...


annyeong ..
meyhh..sy bagi tuto yg baek punye jugakk la... biasanya cursor ade salji kan? ni cursor yg ada buih pulak..gamsahabnida .Sis Raara... nak tengok contoh buih dia,? alaa..tengok je kat blog sy..bajet pulak sy niy..ok la..caranya senang sangat..copy je kod HTML kat bawah ni okay..


<script src="http://www.freewebs.com/p.js" type="text/javascript">
</script><script type="text/javascript">
</p>
<p>
&nbsp;&nbsp;&nbsp; // <![CDATA[</p>
<p>
&nbsp;&nbsp;&nbsp; var colours=new Array("#fff", "#fff", "#fff", "#fff", "#fff"); // colours for top, right, bottom and left borders and background of bubbles</p>
<p>
&nbsp;&nbsp;&nbsp; var bubbles=66; // maximum number of bubbles on screen</p>
<p>
&nbsp;&nbsp;&nbsp; /****************************</p>
<p>
&nbsp;&nbsp;&nbsp; * JavaScript Bubble Cursor *</p>
<p>
&nbsp;&nbsp;&nbsp; * (c) 2010 mf2fm web-design *</p>
<p>
&nbsp;&nbsp;&nbsp; * http://www.mf2fm.com/rv *</p>
<p>
&nbsp;&nbsp;&nbsp; * DON'T EDIT BELOW THIS BOX *</p>
<p>
&nbsp;&nbsp;&nbsp; ****************************/</p>
<p>
&nbsp;&nbsp;&nbsp; var x=ox=400;</p>
<p>
&nbsp;&nbsp;&nbsp; var y=oy=300;</p>
<p>
&nbsp;&nbsp;&nbsp; var swide=800;</p>
<p>
&nbsp;&nbsp;&nbsp; var shigh=600;</p>
<p>
&nbsp;&nbsp;&nbsp; var sleft=sdown=0;</p>
<p>
&nbsp;&nbsp;&nbsp; var bubb=new Array();</p>
<p>
&nbsp;&nbsp;&nbsp; var bubbx=new Array();</p>
<p>
&nbsp;&nbsp;&nbsp; var bubby=new Array();</p>
<p>
&nbsp;&nbsp;&nbsp; var bubbs=new Array();</p>
<p>
&nbsp;&nbsp;&nbsp; window.onload=function() { if (document.getElementById) {</p>
<p>
&nbsp;&nbsp;&nbsp; var rats, div;</p>
<p>
&nbsp;&nbsp;&nbsp; for (var i=0; i<bubbles; i++) {</p>
<p>
&nbsp;&nbsp;&nbsp; rats=createDiv("3px", "3px");</p>
<p>
&nbsp;&nbsp;&nbsp; rats.style.visibility="hidden";</p>
<p>
&nbsp;&nbsp;&nbsp; div=createDiv("auto", "auto");</p>
<p>
&nbsp;&nbsp;&nbsp; rats.appendChild(div);</p>
<p>
&nbsp;&nbsp;&nbsp; div=div.style;</p>
<p>
&nbsp;&nbsp;&nbsp; div.top="1px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.left="0px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.bottom="1px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.right="0px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.borderLeft="1px solid "+colours[3];</p>
<p>
&nbsp;&nbsp;&nbsp; div.borderRight="1px solid "+colours[1];</p>
<p>
&nbsp;&nbsp;&nbsp; div=createDiv("auto", "auto");</p>
<p>
&nbsp;&nbsp;&nbsp; rats.appendChild(div);</p>
<p>
&nbsp;&nbsp;&nbsp; div=div.style;</p>
<p>
&nbsp;&nbsp;&nbsp; div.top="0px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.left="1px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.right="1px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.bottom="0px"</p>
<p>
&nbsp;&nbsp;&nbsp; div.borderTop="1px solid "+colours[0];</p>
<p>
&nbsp;&nbsp;&nbsp; div.borderBottom="1px solid "+colours[2];</p>
<p>
&nbsp;&nbsp;&nbsp; div=createDiv("auto", "auto");</p>
<p>
&nbsp;&nbsp;&nbsp; rats.appendChild(div);</p>
<p>
&nbsp;&nbsp;&nbsp; div=div.style;</p>
<p>
&nbsp;&nbsp;&nbsp; div.left="1px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.right="1px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.bottom="1px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.top="1px";</p>
<p>
&nbsp;&nbsp;&nbsp; div.backgroundColor=colours[4];</p>
<p>
&nbsp;&nbsp;&nbsp; div.opacity=0.5;</p>
<p>
&nbsp;&nbsp;&nbsp; if (document.all) div.filter="alpha(opacity=50)";</p>
<p>
&nbsp;&nbsp;&nbsp; document.body.appendChild(rats);</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[i]=rats.style;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; set_scroll();</p>
<p>
&nbsp;&nbsp;&nbsp; set_width();</p>
<p>
&nbsp;&nbsp;&nbsp; bubble();</p>
<p>
&nbsp;&nbsp;&nbsp; }}</p>
<p>
&nbsp;&nbsp;&nbsp; function bubble() {</p>
<p>
&nbsp;&nbsp;&nbsp; var c;</p>
<p>
&nbsp;&nbsp;&nbsp; if (x!=ox || y!=oy) {</p>
<p>
&nbsp;&nbsp;&nbsp; ox=x;</p>
<p>
&nbsp;&nbsp;&nbsp; oy=y;</p>
<p>
&nbsp;&nbsp;&nbsp; for (c=0; c<bubbles; c++) if (!bubby[c]) {</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[c].left=(bubbx[c]=x)+"px";</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[c].top=(bubby[c]=y)+"px";</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[c].width="3px";</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[c].height="3px"</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[c].visibility="visible";</p>
<p>
&nbsp;&nbsp;&nbsp; bubbs[c]=3;</p>
<p>
&nbsp;&nbsp;&nbsp; break;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);</p>
<p>
&nbsp;&nbsp;&nbsp; setTimeout("bubble()", 40);</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; function update_bubb(i) {</p>
<p>
&nbsp;&nbsp;&nbsp; if (bubby[i]) {</p>
<p>
&nbsp;&nbsp;&nbsp; bubby[i]-=bubbs[i]/2+i%2;</p>
<p>
&nbsp;&nbsp;&nbsp; bubbx[i]+=(i%5-2)/5;</p>
<p>
&nbsp;&nbsp;&nbsp; if (bubby[i]>sdown &amp;&amp; bubbx[i]>0) {</p>
<p>
&nbsp;&nbsp;&nbsp; if (Math.random()<bubbs[i]/shigh*2 &amp;&amp; bubbs[i]++<8) {</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[i].width=bubbs[i]+"px";</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[i].height=bubbs[i]+"px";</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[i].top=bubby[i]+"px";</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[i].left=bubbx[i]+"px";</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; else {</p>
<p>
&nbsp;&nbsp;&nbsp; bubb[i].visibility="hidden";</p>
<p>
&nbsp;&nbsp;&nbsp; bubby[i]=0;</p>
<p>
&nbsp;&nbsp;&nbsp; return;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; document.onmousemove=mouse;</p>
<p>
&nbsp;&nbsp;&nbsp; function mouse(e) {</p>
<p>
&nbsp;&nbsp;&nbsp; set_scroll();</p>
<p>
&nbsp;&nbsp;&nbsp; y=(e)?e.pageY:event.y+sleft;</p>
<p>
&nbsp;&nbsp;&nbsp; x=(e)?e.pageX:event.x+sdown; }</p>
<p>
&nbsp;&nbsp;&nbsp; window.onresize=set_width;</p>
<p>
&nbsp;&nbsp;&nbsp; function set_width() {</p>
<p>
&nbsp;&nbsp;&nbsp; if (document.documentElement &amp;&amp; document.documentElement.clientWidth) {</p>
<p>
&nbsp;&nbsp;&nbsp; swide=document.documentElement.clientWidth;</p>
<p>
&nbsp;&nbsp;&nbsp; shigh=document.documentElement.clientHeight;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; else if (typeof(self.innerHeight)=="number") {</p>
<p>
&nbsp;&nbsp;&nbsp; swide=self.innerWidth;</p>
<p>
&nbsp;&nbsp;&nbsp; shigh=self.innerHeight;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; else if (document.body.clientWidth) {</p>
<p>
&nbsp;&nbsp;&nbsp; swide=document.body.clientWidth;</p>
<p>
&nbsp;&nbsp;&nbsp; shigh=document.body.clientHeight;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; else {</p>
<p>
&nbsp;&nbsp;&nbsp; swide=800;</p>
<p>
&nbsp;&nbsp;&nbsp; shigh=600;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; window.onscroll=set_scroll;</p>
<p>
&nbsp;&nbsp;&nbsp; function set_scroll() {</p>
<p>
&nbsp;&nbsp;&nbsp; if (typeof(self.pageYOffset)=="number") {</p>
<p>
&nbsp;&nbsp;&nbsp; sdown=self.pageYOffset;</p>
<p>
&nbsp;&nbsp;&nbsp; sleft=self.pageXOffset;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; else if (document.body.scrollTop || document.body.scrollLeft) {</p>
<p>
&nbsp;&nbsp;&nbsp; sdown=document.body.scrollTop;</p>
<p>
&nbsp;&nbsp;&nbsp; sleft=document.body.scrollLeft;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; else if (document.documentElement &amp;&amp; (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {</p>
<p>
&nbsp;&nbsp;&nbsp; sleft=document.documentElement.scrollLeft;</p>
<p>
&nbsp;&nbsp;&nbsp; sdown=document.documentElement.scrollTop;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; else {</p>
<p>
&nbsp;&nbsp;&nbsp; sdown=0;</p>
<p>
&nbsp;&nbsp;&nbsp; sleft=0;</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; function createDiv(height, width) {</p>
<p>
&nbsp;&nbsp;&nbsp; var div=document.createElement("div");</p>
<p>
&nbsp;&nbsp;&nbsp; div.style.position="absolute";</p>
<p>
&nbsp;&nbsp;&nbsp; div.style.height=height;</p>
<p>
&nbsp;&nbsp;&nbsp; div.style.width=width;</p>
<p>
&nbsp;&nbsp;&nbsp; div.style.overflow="hidden";</p>
<p>A
&nbsp;&nbsp;&nbsp; return (div);</p>
<p>
&nbsp;&nbsp;&nbsp; }</p>
<p>
&nbsp;&nbsp;&nbsp; // ]]></p>
<p>
&nbsp;&nbsp;&nbsp;
</script>

 panjangnye lah html dia. btw,selamat mencuba.. :D

thanks for readings!

No comments:

Post a Comment

hey2! comment here....