تصویر به دنبال موس :
<!------ http://www.hadisystem.tk -------> <script> <!-- var ns = (document.layers)?1:0; var Anim=new Array(); var imgwidth=40; // Image width var imgheight=40; // Image height var button = Array(); // to pre-cache images button[0]=new Image(); button[0].src="URL PIC ON"; button[1]=new Image(); button[1].src="URL PIC OFF"; var text="<table width=10 bgcolor=#ffffff><td><a href='javascript:showhideAnimation()'><center><img name='Button' src='"+button[0].src+"' width='"+imgwidth+"' height='"+imgheight+"' border='0'></center></a></font></td></table>" // A bit of HTML code to display the button //Initialize some variables to make the button always to appear on the frame's bottom-right corner if (ns) { document.write("<LAYER NAME='FlyOnOff' LEFT=0 TOP=0>"+text+"</LAYER>"); horz=".left"; vert=".top"; docStyle="document."; styleDoc=""; innerW="window..innerWidth"; innerH="window.innerHeight"; offsetX="window.pageXOffset"; offsetY="window.pageYOffset"; }else { document.write("<div id='FlyOnOff' style='position:absolute; visibility:show; left:235px; top:-50px; z-index:2'>"+text+"</div>"); horz=".pixelLeft"; vert=".pixelTop"; docStyle=""; styleDoc=".style"; innerW="document.body.clientWidth"; innerH="document.body.clientHeight"; offsetX="document.body.scrollLeft"; offsetY="document.body.scrollTop"; } // Moves the button in the right position function checkLocation() { objectXY="FlyOnOff"; var availableX=eval(innerW); var availableY=eval(innerH); var currentX=eval(offsetX); var currentY=eval(offsetY); x=availableX-(imgwidth+30)+currentX; y=availableY-(imgheight+20)+currentY; eval(docStyle + objectXY + styleDoc + horz + "=" + x); eval(docStyle + objectXY + styleDoc + vert + "=" + y); } Anim[0]=setInterval('checkLocation()', 10); (document.layers)?window.captureEvents(Event.MOUSEMOVE):0; (document.layers)?window.onMouseMove=getMousePosition:document.onmousemove=getMousePosition; var Dot_Ro=60; //Dot's distance from the mouse pointer var Dot_Theta=0; //Dot's initial angle var Dot_Speed; //Dot's absolute Angular speed var Dot_Direction=1; //Dot's direction (1=clockwise) var Dot_x=0; //Dot's original position var Dot_y=0; var alpha; //Angle from the fly to the mouse var mult; //Ausiliary variable to define the angle var picX = 20; //Fly's coords. var picY = 100; var mouseX = 0; //Mouse coords. var mouseY = 0; var step = 10; //Pixels var speed = 100;//u-seconds // Dir specifies the right picture; // img pre-caches images. var dir = Array(); dir[-4]="URL PIC 1"; dir[-1]="URL PIC 2"; dir[-2]="URL PIC 3"; dir[-3]="URL PIC 4"; dir[3]="URL PIC 1"; dir[4]="URL PIC 2"; dir[1]="URL PIC 3"; dir[2]="URL PIC 4"; dir[0]=""; var img = Array(); for (var i=-4; i<5; i++){ img[i]=new Image(); img[i].src=dir[i]; } // Some HTML code to show the fly. if (ns) { document.write("<LAYER NAME='FlyDiv' LEFT=0 TOP=0><img src="+dir[1]+" name='pic'></LAYER>"); }else { document.write("<div id='FlyDiv' style='position:absolute'>"); document.write("<img name='pic' src=" + dir[1] + "></div>"); } // Shows the proper image for the fly. function display(direction) { //direction must be from -4 to 4, but not 0. if (ns) { document.pic.src = dir[direction]; }else{ pic.src = dir[direction]; } } function getMousePosition(e) { mouseY=(ns)?e.pageY:window.event.y + document.body.scrollTop; mouseX=(ns)?e.pageX:window.event.x + document.body.scrollLeft; } //Calculate new position function calcNewPos() { var dist=Math.sqrt(Math.pow(mouseY-picY,2) + Math.pow(mouseX-picX,2)); Dot_Speed=Math.PI/15; Dot_Theta+=Dot_Direction*Dot_Speed; Dot_x=mouseX+Dot_Ro*Math.cos(Dot_Theta); Dot_y=mouseY+Dot_Ro*Math.sin(Dot_Theta); var arg = (Dot_y-picY) / (Dot_x-picX); mult = (Dot_x - picX < 0)? mult = -1:1; alpha = Math.atan(arg); var dx = mult * step * Math.cos(alpha); var dy = mult * step * Math.sin(alpha); picX += dx; picY += dy; } //Shows or hides the fly when the "button" is pressed function showhideAnimation() { if (ns) { document.layers['FlyDiv'].visibility=document.layers['FlyDiv'].visibility=="hide"?"show":"hide"; document.Button.src = document.layers['FlyDiv'].visibility=="hide"?button[1].src:button[0].src; }else { FlyDiv.style.visibility=="hidden"?FlyDiv.style.visibility = "visible":FlyDiv.style.visibility = "hidden"; Button.src = FlyDiv.style.visibility=="hidden"?button[1].src:button[0].src; } } // Moves the fly around the screen function moveFly() { // moves the fly in a new position... calcNewPos(); if (ns) { document.layers['FlyDiv'].left = picX; document.layers['FlyDiv'].top = picY; }else{ FlyDiv.style.left = picX - pic.width / 2; FlyDiv.style.top = picY - pic.height / 2; } // ... and changes the image. alpha=-180*alpha/Math.PI; alpha+=22.5; var OK=0; for(var i=0; (i<4)&& !OK; i++){ if (alpha<-Math.PI+45*i){ display(mult*(i+1)); OK=1; } } } // Changes Dot's turning direction function ChangeDotDirection() { Dot_Direction=-Dot_Direction; Dot_Theta+=Math.PI; } //Go! Anim[1]=setInterval('moveFly()', speed); Anim[2]=setInterval('ChangeDotDirection()', speed*50); function killIt() { for(var i=0;i<Anim.length;i++) { if(Anim[i]) { clearInterval(Anim[i]); Anim[i]=null; } } } //--> </script> <!------ http://www.hadisystem.tk ------->
به جای URL PIC آدرس عکس آپلود شده
هدف گیر به دنبال موس :
<!------ http://www.hadisystem.tk -------> <style> <!-- #leftright, #topdown{ position:absolute; left:0; top:0; width:1px; height:1px; layer-background-color:red; background-color:red; z-index:100; font-size:1px; } --></style> <div id="leftright" style="width:expression(document.body.clientWidth-2)"> </div> <div id="topdown" style="height:expression(document.body.clientHeight-2)"> </div> <script language="JavaScript1.2"> <!-- if (document.all&&!window.print){ leftright.style.width=document.body.clientWidth-2 topdown.style.height=document.body.clientHeight-2 } else if (document.layers){ document.leftright.clip.width=window.innerWidth document.leftright.clip.height=1 document.topdown.clip.width=1 document.topdown.clip.height=window.innerHeight } function followmouse1(){ //move cross engine for IE 4+ leftright.style.pixelTop=document.body.scrollTop+event.clientY+1 topdown.style.pixelTop=document.body.scrollTop if (event.clientX<document.body.clientWidth-2) topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1 else topdown.style.pixelLeft=document.body.clientWidth-2 } function followmouse2(e){ //move cross engine for NS 4+ document.leftright.top=e.y+1 document.topdown.top=pageYOffset document.topdown.left=e.x+1 } if (document.all) document.onmousemove=followmouse1 else if (document.layers){ window.captureEvents(Event.MOUSEMOVE) window.onmousemove=followmouse2 } function regenerate(){ window.location.reload() } function regenerate2(){ setTimeout("window.onresize=regenerate",400) } if ((document.all&&!window.print)||document.layers) window.onload=regenerate2 //--> </script> <!------ http://www.hadisystem.tk ------->
ساعت عقربه دار متحرک :
<!------ http://www.hadisystem.tk -------> <script language="JavaScript"> fCol='#8000FF'; //face colour. sCol='#FF0080'; //seconds colour. mCol='00FFFF'; //minutes colour. hCol='FFFF00'; //hours colour. Ybase=35; //Clock height. Xbase=45; //Clock width. H='...'; H=H.split(''); M='....'; M=M.split(''); S='.....'; S=S.split(''); NS4=(document.layers); NS6=(document.getElementById&&!document.all); IE4=(document.all); Ypos=0; Xpos=0; dots=12; Split=360/dots; if (NS6){ for (i=1; i < dots+1; i++){ document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>'); } for (i=0; i < M.length; i++){ document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>'); } for (i=0; i < H.length; i++){ document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>'); } for (i=0; i < S.length; i++){ document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>'); } } if (NS4){ dgts='1 2 3 4 5 6 7 8 9 10 11 12'; dgts=dgts.split(' ') for (i=0; i < dots; i++){ document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>'); } for (i=0; i < M.length; i++){ document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>'); } for (i=0; i < H.length; i++){ document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>'); } for (i=0; i < S.length; i++){ document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>'); } } if (IE4){ document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=1; i < dots+1; i++){ document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>'); } document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < M.length; i++){ document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>'); } document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < H.length; i++){ document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>'); } document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < S.length; i++){ document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>'); } document.write('</div></div>') } function clock(){ time = new Date (); secs = time.getSeconds(); sec = -1.57 + Math.PI * secs/30; mins = time.getMinutes(); min = -1.57 + Math.PI * mins/30; hr = time.getHours(); hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360; if (NS6){ Ypos=window.pageYOffset+window.innerHeight-Ybase-25; Xpos=window.pageXOffset+window.innerWidth-Xbase-30; for (i=1; i < dots+1; i++){ document.getElementById("n6Digits"+i).style.top=Ypos-15+Ybase*Math.sin(-1.56 +i *Split*Math.PI/180) document.getElementById("n6Digits"+i).style.left=Xpos-15+Xbase*Math.cos(-1.56 +i*Split*Math.PI/180) } for (i=0; i < S.length; i++){ document.getElementById("Nx"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(sec); document.getElementById("Nx"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(sec); } for (i=0; i < M.length; i++){ document.getElementById("Ny"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(min); document.getElementById("Ny"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(min); } for (i=0; i < H.length; i++){ document.getElementById("Nz"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(hrs); document.getElementById("Nz"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(hrs); } } if (NS4){ Ypos=window.pageYOffset+window.innerHeight-Ybase-20; Xpos=window.pageXOffset+window.innerWidth-Xbase-30; for (i=0; i < dots; ++i){ document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045 +i*Split*Math.PI/180) document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045 +i*Split*Math.PI/180) } for (i=0; i < S.length; i++){ document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec); document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec); } for (i=0; i < M.length; i++){ document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min); document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min); } for (i=0; i < H.length; i++){ document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs); document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs); } } if (IE4){ Ypos=document.body.scrollTop+window.document.body.clientHeight-Ybase-20; Xpos=document.body.scrollLeft+window.document.body.clientWidth-Xbase-20; for (i=0; i < dots; ++i){ ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i *Split*Math.PI/180) ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i *Split*Math.PI/180) } for (i=0; i < S.length; i++){ x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec); x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec); } for (i=0; i < M.length; i++){ y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min); y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min); } for (i=0; i < H.length; i++){ z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs); z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs); } } setTimeout('clock()',100); } clock(); //--> </script> <!------ http://www.hadisystem.tk ------->
گذاشتن عکس در پشت زمینه :
<!------ http://www.hadisystem.tk -------> <body style="background-image: url('آدرس عکس آپلود شده')"> <!------ http://www.hadisystem.tk ------->