دنياي برنامه نويسی World of Programming - نمايش عكسي به دنبال نشانگر ماوس

X

دنياي برنامه نويسی World of Programming - نمايش عكسي به دنبال نشانگر ماوس به وب سايت "دنياي برنامه نويسي" خوش آمديد Welcome to "World of programming" Web Site

دنياي برنامه نويسی World of Programming

همكاري، همفكري و آموزش برنامه نويسي

نمايش عكسي به دنبال نشانگر ماوس

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

شما براي اين كار بايد دقيقا" بعد از <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 NAME='FlyOnOff' LEFT=0 TOP=0></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'></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 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>

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

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

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

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

http://www.majidonline.com :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 12:50 توسط محمدرضا فتحي |

درآمد آسان، عالي و تضمين شده، ثبت نام كنيد و شوكه شويد

DESIGNED BY: M.REZA FATHI
محمدرضا فتحي