تصویر به دنبال موس :

<!------ http://www.hadisystem.tk -------> <br><> <br><!-- <br>var ns = (document.layers)?1:0; <br>var Anim=new Array(); <br>var imgwidth=40; // Image width <br>var imgheight=40; // Image height <br>var button = Array(); // to pre-cache images <br>button[0]=new Image(); <br>button[0].src="URL PIC ON"; <br>button[1]=new Image(); <br>button[1].src="URL PIC OFF"; <br> <br>var text="<table width=10 bgcolor=#ffffff><td><a href="java: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 <br> <br>//Initialize some variables to make the button always to appear on the frame"s bottom-right corner <br>if (ns) { <br>document.write("<LAYER NAME="FlyOnOff" LEFT=0 TOP=0>"+text+"</LAYER>"); <br>horz=".left"; <br>vert=".top"; <br>docStyle="document."; <br>styleDoc=""; <br>innerW="window..innerWidth"; <br>innerH="window.innerHeight"; <br>offsetX="window.pageXOffset"; <br>offsetY="window.pageYOffset"; <br>}else { <br>document.write("<div id="FlyOnOff" style="position:absolute; visibility:show; left:235px; top:-50px; z-index:2">"+text+"</div>"); <br>horz=".pixelLeft"; <br>vert=".pixelTop"; <br>docStyle=""; <br>styleDoc=".style"; <br>innerW="document.body.clientWidth"; <br>innerH="document.body.clientHeight"; <br>offsetX="document.body.scrollLeft"; <br>offsetY="document.body.scrollTop"; <br>} <br>// Moves the button in the right position <br>function checkLocation() { <br>XY="FlyOnOff"; <br>var availableX=(innerW); <br>var availableY=(innerH); <br>var currentX=(offsetX); <br>var currentY=(offsetY); <br>x=availableX-(imgwidth+30)+currentX; <br>y=availableY-(imgheight+20)+currentY; <br>(docStyle + XY + styleDoc + horz + "=" + x); <br>(docStyle + XY + styleDoc + vert + "=" + y); <br>} <br>Anim[0]=setInterval("checkLocation()", 10); <br>(document.layers)?window.captureEvents(Event.MOUSEMOVE):0; <br>(document.layers)?window.onMouseMove=getMousePosition:document.onmousemove=getMousePosition; <br>var Dot_Ro=60; //Dot"s distance from the mouse pointer <br>var Dot_Theta=0; //Dot"s initial angle <br>var Dot_Speed; //Dot"s absolute Angular speed <br>var Dot_Direction=1; //Dot"s direction (1=clockwise) <br>var Dot_x=0; //Dot"s original position <br>var Dot_y=0; <br> <br>var alpha; //Angle from the fly to the mouse <br>var mult; //Ausiliary variable to define the angle <br> <br>var picX = 20; //Fly"s coords. <br>var picY = 100; <br>var mouseX = 0; //Mouse coords. <br>var mouseY = 0; <br>var step = 10; //Pixels <br>var speed = 100;//u-seconds <br> <br> <br>// Dir specifies the right picture; <br>// img pre-caches images. <br>var dir = Array(); <br>dir[-4]="URL PIC 1"; <br>dir[-1]="URL PIC 2"; <br>dir[-2]="URL PIC 3"; <br>dir[-3]="URL PIC 4"; <br>dir[3]="URL PIC 1"; <br>dir[4]="URL PIC 2"; <br>dir[1]="URL PIC 3"; <br>dir[2]="URL PIC 4"; <br>dir[0]=""; <br> <br>var img = Array(); <br>for (var i=-4; i<5; i++){ <br>img[i]=new Image(); <br>img[i].src=dir[i]; <br>} <br> <br>// Some HTML code to show the fly. <br>if (ns) { <br>document.write("<LAYER NAME="FlyDiv" LEFT=0 TOP=0><img src="+dir[1]+" name="pic"></LAYER>"); <br>}else { <br>document.write("<div id="FlyDiv" style="position:absolute">"); <br>document.write("<img name="pic" src=" + dir[1] + "></div>"); <br>} <br> <br>// Shows the proper image for the fly. <br>function display(direction) { //direction must be from -4 to 4, but not 0. <br>if (ns) { <br>document.pic.src = dir[direction]; <br>}else{ <br>pic.src = dir[direction]; <br>} <br>} <br> <br> <br>function getMousePosition(e) { <br>mouseY=(ns)?e.pageY:window.event.y + document.body.scrollTop; <br>mouseX=(ns)?e.pageX:window.event.x + document.body.scrollLeft; <br>} <br> <br>//Calculate new position <br>function calcNewPos() { <br> <br>var dist=Math.sqrt(Math.pow(mouseY-picY,2) + Math.pow(mouseX-picX,2)); <br>Dot_Speed=Math.PI/15; <br>Dot_Theta+=Dot_Direction*Dot_Speed; <br>Dot_x=mouseX+Dot_Ro*Math.cos(Dot_Theta); <br>Dot_y=mouseY+Dot_Ro*Math.sin(Dot_Theta); <br>var arg = (Dot_y-picY) / (Dot_x-picX); <br>mult = (Dot_x - picX < 0)? mult = -1:1; <br>alpha = Math.atan(arg); <br>var dx = mult * step * Math.cos(alpha); <br>var dy = mult * step * Math.sin(alpha); <br>picX += dx; <br>picY += dy; <br>} <br> <br>//Shows or hides the fly when the "button" is pressed <br>function showhideAnimation() { <br>if (ns) { <br>document.layers["FlyDiv"].visibility=document.layers["FlyDiv"].visibility=="hide"?"show":"hide"; <br>document.Button.src = document.layers["FlyDiv"].visibility=="hide"?button[1].src:button[0].src; <br>}else { <br>FlyDiv.style.visibility=="hidden"?FlyDiv.style.visibility = "visible":FlyDiv.style.visibility = "hidden"; <br>Button.src = FlyDiv.style.visibility=="hidden"?button[1].src:button[0].src; <br>} <br>} <br> <br> <br>// Moves the fly around the screen <br>function moveFly() { <br>// moves the fly in a new position... <br>calcNewPos(); <br>if (ns) { <br>document.layers["FlyDiv"].left = picX; <br>document.layers["FlyDiv"].top = picY; <br>}else{ <br>FlyDiv.style.left = picX - pic.width / 2; <br>FlyDiv.style.top = picY - pic.height / 2; <br>} <br> <br>// ... and changes the image. <br>alpha=-180*alpha/Math.PI; <br>alpha+=22.5; <br>var OK=0; <br>for(var i=0; (i<4)&& !OK; i++){ <br>if (alpha<-Math.PI+45*i){ <br>display(mult*(i+1)); <br>OK=1; <br>} <br>} <br>} <br> <br>// Changes Dot"s turning direction <br>function ChangeDotDirection() { <br>Dot_Direction=-Dot_Direction; <br>Dot_Theta+=Math.PI; <br>} <br> <br>//Go! <br>Anim[1]=setInterval("moveFly()", speed); <br>Anim[2]=setInterval("ChangeDotDirection()", speed*50); <br> <br>function killIt() <br>{ <br>for(var i=0;i<Anim.length;i++) <br>{ <br>if(Anim[i]) <br>{ <br>clearInterval(Anim[i]); <br>Anim[i]=null; <br>} <br>} <br>} <br>//--> <br></> <br><!------ http://www.hadisystem.tk ------->