حالت موضوعی | حالت خطی

**roozbeh_sa_1382**

اين يكي ديگه از آموزش هايي است كه با استفاده از اون مي تونيد مثل مقاله قبلي يه چيزي رو به دنبال موس به حركت در بيارين , اما با اين تفاوت كه به جاي متن شما مي تونيد عكس يا عكس هايي رو به دنبال موس به حركت در بياريد.

شما براي اين كار بايد دقيقا" بعد از <Body> اين سورس را به فرم خود اضافه كنيد :

<script>
var ns = (document.layers)?1:0;
var Anim=new Array(); /* holds interval events */
var imgwidth=40; // Image width
var imgheight=40; // Image height
var button = Array(); // to pre-cache images
button[0]=new Image();
button[0].src="pic1.gif";
button[1]=new Image();
button[1].src="pic3.gif";

//Initialize some variables to make the button always to appear on the frame's bottom-right corner
if (ns) {
document.write("<LAYER></LAYER>");
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window..innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}else {
document.write("<div></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]="pic1.gif";
dir[-1]="pic2.gif";
dir[-2]="pic3.gif";
dir[-3]="pic4.gif";
dir[3]="pic1.gif";
dir[4]="pic2.gif";
dir[1]="pic3.gif";
dir[2]="pic4.gif";
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><img></LAYER>");
}else {
document.write("<div>");
document.write("<img></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>

خوب حالا توضيحات :

احتمالا" اگرحالا شما صفحه را Refresh كنيد مي بينيد كه چيزهايي شبيه عكس به دنبال موس در حركت مي باشد .

براي اينكه شما عكس هاي خودتان را جاي گزين كنيد بايد در اون پوشه اي كه اي page را قرار داديد 4 فايل عكس به انشعاب gif به نام هاي pic1.gif , pic2.gif , pic3.gif , pic4.gif را در اون پوشه قرار بديد.

البته در خود سورس هم توضوحاتي نوشتم كه اگه كسي خواست اين كار رو سفارشي تر انجام بده مي تونه اون ها رو هم تغييير بده به عنوان مثال در اول سورس يه چيزي مثل اين هست var imgwidth=40; // Image width كه با تغيير اون 40 به عددي ايگه مي تونيد ارتفاع عكس هايي رو كه به دنبال موس هستند رو عوض كنيد