حرکت عکس بدنبال موس

C# Script , VB Script , Java Script
موضوع جدید ارسال پست
mohsen
مدیر سایت
مدیر سایت
پست: 214
تاریخ عضویت: دوشنبه 19 خرداد 1382, 12:00 am
محل اقامت: ایران مشهد
تشکر شده: 3 دفعه
تماس:

حرکت عکس بدنبال موس

پست توسط mohsen »

کد های زیر را copy و در پروژه html خودد paste کنید و سپس استفاده کنید. :wink:

کد: انتخاب همه

<html>
<head>

</head>
<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="images-script/pic1.gif";
button[1]=new Image();
button[1].src="images-script/pic3.gif";

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]="images-script/pic1.gif";
dir[-1]="images-script/pic2.gif";
dir[-2]="images-script/pic3.gif";
dir[-3]="images-script/pic4.gif";
dir[3]="images-script/pic1.gif";
dir[4]="images-script/pic2.gif";
dir[1]="images-script/pic3.gif";
dir[2]="images-script/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 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>

</body>
</html>
برای اجرای برنامه اینجا کلیک کنید http://www.javascript.ir/test.asp?id=59
کد از سایت ایران جاوا اسکریپت


محسن شارع
http://www.mohsenweb.ir
mehrdad-t
کاربر خیلی فعال
کاربر خیلی فعال
پست: 204
تاریخ عضویت: جمعه 9 آبان 1382, 12:00 am
تماس:

پست توسط mehrdad-t »

عكسي كه به دنبال موس مي آيد به شكل ضربدر ميباشد.به وبلاگ زير برويد و ببينيد.

http://tadjdini.blogsky.com/
mohsen
مدیر سایت
مدیر سایت
پست: 214
تاریخ عضویت: دوشنبه 19 خرداد 1382, 12:00 am
محل اقامت: ایران مشهد
تشکر شده: 3 دفعه
تماس:

پست توسط mohsen »

شما اونو بردارین و عکس مورد نظر رو جایگزین کنین. :wink:
محسن شارع
http://www.mohsenweb.ir
موضوع جدید ارسال پست

بازگشت به “Web Scripting”