Customs Cursor with javascript
To make our website more interest , and good looks , we can use javascript to make something different with our website template or any component other .
Now we will make javascript to custom our cursor in browser, we can use so many – many custom to our website cursor .
Hehe :D i'm sorry if my English still bad ,I'm still try to speak English and learn more and more. :D
Key let's going to the topic , you can put this code bellow between <head></head> in your website script.
Put this code bellow :
<script language="JavaScript">
<!-- Begin
function nMouse(evnt){
Ypos = evnt.pageY;
Xpos = evnt.pageX;
}
function iMouse() {
Ypos = event.y+document.body.scrollTop;
Xpos = event.x+document.body.scrollLeft;
}
function Comet() {
var yBase = (document.layers)?window.innerHeight/4:window.document.body.clientHeight/4;
var xBase = (document.layers)?window.innerWidth/4:window.document.body.clientWidth/4;
for (i = 0; i < 14; i++){
var randCol = Math.round(Math.random()*8);
var layer = (document.layers)?document.layers['n'+i]:me[i].style;
layer.top =Ypos + yBase*Math.cos((currStep+i*4)/12)*Math.cos(0.7+currStep/200);
layer.left = Xpos + xBase*Math.sin((currStep+i*3)/10)*Math.sin(8.2+currStep/400);
if (ns) layer.bgColor = Clrs[randCol];
else
layer.background = Clrs[randCol];
}
currStep += step;
setTimeout("Comet()",10);
}
ns = (document.layers)?1:0;
Clrs = new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff');
yBase = 0;
xBase = 0;
step = 3;
currStep = 0;
Ypos = 0;
Xpos = 0;
if (ns){
for (i = 0; i < 14; i++)
document.write('<LAYER NAME="n'+i+'" LEFT=0 TOP=0 CLIP="0,0,'+i/4+','+i/4+'"></LAYER>');
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove = nMouse;
}
else{
document.write('<div style="position:absolute;top:0;left:0"><div style="position:relative">');
for (i=0; i < 14; i++)
{document.write('<div id="me" style="position:absolute;top:0;left:0;width:'+i/4+';height:'+i/4+';font-size:'+i/4+'"></div>');}
document.write('</div></div>');
document.onmousemove = iMouse;
}
window.onload = Comet;
// End -->
</script>
Or if you have any customs cursor code , you can browse from any website or download code form any author and put in your website .
And now run your browser and open your website.
Note : Javascript must be enable in your current browser , you can setting again if javascript not running .
And the result of this code like my cursor :D.
And if you have more experience you can share with me :D , or if you have new project you can share about your fail or any new thing .
Thanks
DAn
Posted by Danivan7
|
at
Wednesday, October 15, 2008
0 comments:
Post a Comment