JavaScript och muspekarens koordinater

I denna guide lär vi oss att hantera muspekarens koordinater med JavaScript och även att flytta runt ett html objekt

Skärmstorlek med JavaScript

För att vi skall veta att vi inte flyttar ut objektet från skärmen måste vi börja med att ta reda på besökarens skärmupplösning.
Vi sätter standardbredden till 640 och standardhöjden till 480 pixlar.
Beroende på vilken webbläsare som besökaren använder och om den tillåter java försöker vi ta fram bredden och höjden.

<script language="JavaScript1.2">
var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
 screenW = screen.width;
 screenH = screen.height;
}
else if (navigator.appName == "Netscape" 
    && parseInt(navigator.appVersion)==3
    && navigator.javaEnabled()
   ) 
{
 var jToolkit = java.awt.Toolkit.getDefaultToolkit();
 var jScreenSize = jToolkit.getScreenSize();
 screenW = jScreenSize.width;
 screenH = jScreenSize.height;
}

Hantera muspekarens koordinater

Om webbläsaren är annan än explorer anropar vi captureEvents(Event.MOUSEMOVE) och ser till att funktionen getMouseXY anropas när muspekaren rörts.
Är den en explorer webbläsare använder vi event.clientX + document.body.scrollLeft och event.clientY + document.body.scrollTop för att erhålla positionen för muspekaren.

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { //Position om browsern är Explorer
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // Position om browsern inte är Explorer
tempX = e.pageX;
tempY = e.pageY;
}  

För att förhindra buggar ser vi sedan till att tempX och tempY aldrig understiger 0.

if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}  

Elementen som skall ändras med JavaScript

För att kunna skapa något substrakt av vårt Skript skall vi Före JavaScriptet lägga till 2 input element och två div-element.

<form name="Show">
X <input type="text" name="MouseX" value="0" size="4"><br>
Y <input type="text" name="MouseY" value="0" size="4"><br>
<div id="diven" style="position:absolute;top:200;left:150;width:25;
			height:25;background:lightblue;">
</div>
<div style="position:absolute;top:500;left:300;top:500;width:150;
	height:150;background:lightblue;border:1px black dotted">
</div>
</form>

Flytta runt elementen med JavaScript

Sist men inte minst flyttar vi runt objektet med ID-värdet "dv" samt skriver ut positionen i y-led i inputelementet MusY och i x-led i elementet MusX.

if(tempX>299 && tempX<451 && tempY>499 && tempY<651){
document.Show.MusY.value = (screenH-225)/150*(tempY-500);
document.Show.MusX.value = (screenW-50)/150*(tempX-300);
document.getElementById("dv").style.top=(screenH-225)/150*(tempY-500); 
document.getElementById("dv").style.left=(screenW-50)/150*(tempX-300);
}
return true;
}
</script>

För att se ett exempel på detta JavaScript klicka här.

Visa alla våra Javascript guider

---

Kommentarer    Antal 0    Medelpoäng 0/10

Bli medlem för att kunna skriva kommentarer!
Logga in om du redan är medlem.