CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

per2000 Nybegynder

17. februar 2007 - 20:09 Der er 12 kommentarer og
1 løsning

script der flytter musens pegning

Jeg skal i frontpage bruge et script der flytter musens
pegning (Cursor som en hånd) fra et punkt og til et punkt glidende. Herfra til et andet punkt for at stoppe
Kan i hjælpe

Synes godt om

crazysnap Seniormester

17. februar 2007 - 23:46 #1

Hej per2000,

Det er ikke muligt at flytte cursoren til et bestemt punkt via javascript. Prøv at overvej sikkerhedsaspekterne i det hvis det var programmatisk muligt via javascript at bestemme positionen af cursoren på klientens computer. :)

Jeg har desværre heller ingen alternative forslag til hvordan du kan løse problemet, nogen andre som har input til per2000?

Mvh,

- Snap

Synes godt om

per2000 Nybegynder

18. februar 2007 - 11:39 #2

Jeg må have udtrykt mig forkert.
Det jeg har behov for er at ilustrere MAN skal flytte musen til et bestemt punkt. Det ses masser af steder - bl.a. her i en bannerreklame.

Synes godt om

crazysnap Seniormester

18. februar 2007 - 15:59 #3

Hej per2000,

Det er noget javascript ihvertfald godt kan klare :). Jeg har lavet et lille eksempel nedenfor som flytter et div-tag rundt efter givne punkter (x,y). Man definerer punkterne i scriptet (arrPoints) og kalder PerformMovement fra html-koden med cursor div-tag id'et som argument. Da det er et div tag der flyttes rundt på kan du proppe hvad som helst ind i det (f.eks. et billede af en cursor).

Håber det er mere eller mindre det du søger. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Moving Cursor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">

var speed = 3; //Speed of cursor (larger value = faster movement)

//Internal members
var x;
var y;
var divTag;
var position;
var len;

//Array of points defining the path of the cursor (div-tag)
var arrPoints = new Array();
arrPoints[0] = "10,10"; //Starting point
arrPoints[1] = "100,100"; //move to second point
arrPoints[2] = "20, 300"; //move to third point
arrPoints[3] = "300, 200"; //move to fourth point

function PerformMovement(cursorId)
{
//Grab cursor div-tag
divTag = document.getElementById(cursorId);

//Make sure it is visible
divTag.style.visibility = 'visible';

//Reset point position pointer
position = 0;

//Initialize first linear path
MoveLinear();
}

function MoveLinear()
{
if(position+1 == arrPoints.length)
return;

//Get the two points
var start = arrPoints[position].split(",");
var end = arrPoints[++position].split(",");

//define vector between the two points
var x1 = parseFloat(end[0]) - parseFloat(start[0]);
var y1 = parseFloat(end[1]) - parseFloat(start[1]);

//Distance between the two points
len = Math.sqrt((x1*x1) + (y1*y1));

//Normalize vector creating a direction vector
x = x1 / len;
y = y1 / len;

//Call the "rendering" method
MoveTo(0, parseFloat(start[0]), parseFloat(start[1]));
}

function MoveTo(pos, posStartX, posStartY)
{
//Calculate new position by the start point and direction vector
var t1 = posStartX + (x*pos);
var t2 = posStartY + (y*pos);

//New position of "cursor"
divTag.style.left = t1 + "px";
divTag.style.top = t2 + "px";

//Calculate distance between start point and new point
var g1 = t1 - posStartX;
var g2 = t2 - posStartY;
var len1 = Math.sqrt(g1*g1 + g2*g2);

//Check if new point exceeds the linesegment
if(len1 < len)
{
pos += speed;
setTimeout("MoveTo("+ pos +", "+ posStartX +", " + posStartY + ")", 1);
}
else
MoveLinear();
}
</script>
</head>
<body>
<table>
<tr>
<td>
bla bla, tryk på knappen:
</td>
<td><input id="btn1" type="button" value="Click to move div around" onclick="PerformMovement('cursor');" /></td>
</tr>
<tr>
<td colspan="2">
bla bla bla
</td>
</tr>
</table>
<div id="cursor" style="position: absolute; visibility: hidden;">Her kan indsættes hvad som helst (billede, knap, etc.)</div>
</body>
</html>

Mvh,

- Snap :)

Synes godt om

per2000 Nybegynder

18. februar 2007 - 17:37 #4

Hej Snap

Den er lige hvad jeg manglede - tusinde tak!
Den skal starte straks siden loades ind.
Vil du modificere scriptet så det sker - altså fjerne button

Synes godt om

per2000 Nybegynder

18. februar 2007 - 17:43 #5

Jeg glemte den skal ´slukke´ til sidst

Synes godt om

crazysnap Seniormester

18. februar 2007 - 17:52 #6

Hej per2000,

Glad for jeg kunne hjælpe! :)

Og jeg har ændret det så div-tag'en forsvinder efter den er nået det sidste punkt samt at scriptet køres når siden loades (har bare rykket "PerformMovement('cursor');" kaldet ind i onload på body'en i stedet for i onclick på knappen).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Moving Cursor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">

var speed = 3; //Speed of cursor (larger value = faster movement)

//Internal members
var x;
var y;
var divTag;
var position;
var len;

//Array of points defining the path of the cursor (div-tag)
var arrPoints = new Array();
arrPoints[0] = "10,10"; //Starting point
arrPoints[1] = "100,100"; //move to second point
arrPoints[2] = "20, 300"; //move to third point
arrPoints[3] = "300, 200"; //move to fourth point

function PerformMovement(cursorId)
{
//Grab cursor div-tag
divTag = document.getElementById(cursorId);

//Make sure it is visible
divTag.style.visibility = 'visible';

//Reset point position pointer
position = 0;

//Initialize first linear path
MoveLinear();
}

function MoveLinear()
{
if(position+1 == arrPoints.length)
{
divTag.style.visibility = 'hidden';
return;
}

//Get the two points
var start = arrPoints[position].split(",");
var end = arrPoints[++position].split(",");

//define vector between the two points
var x1 = parseFloat(end[0]) - parseFloat(start[0]);
var y1 = parseFloat(end[1]) - parseFloat(start[1]);

//Distance between the two points
len = Math.sqrt((x1*x1) + (y1*y1));

//Normalize vector creating a direction vector
x = x1 / len;
y = y1 / len;

//Call the "rendering" method
MoveTo(0, parseFloat(start[0]), parseFloat(start[1]));
}

function MoveTo(pos, posStartX, posStartY)
{
//Calculate new position by the start point and direction vector
var t1 = posStartX + (x*pos);
var t2 = posStartY + (y*pos);

//New position of "cursor"
divTag.style.left = t1 + "px";
divTag.style.top = t2 + "px";

//Calculate distance between start point and new point
var g1 = t1 - posStartX;
var g2 = t2 - posStartY;
var len1 = Math.sqrt(g1*g1 + g2*g2);

//Check if new point exceeds the linesegment
if(len1 < len)
{
pos += speed;
setTimeout("MoveTo("+ pos +", "+ posStartX +", " + posStartY + ")", 1);
}
else
MoveLinear();
}
</script>
</head>
<body onload="PerformMovement('cursor');">
<table>
<tr>
<td>
bla bla, tryk på knappen:
</td>
<td><input id="btn1" type="button" value="Click to move div around" onclick="alert('gør intet nu');" /></td>
</tr>
<tr>
<td colspan="2">
bla bla bla
</td>
</tr>
</table>
<div id="cursor" style="position: absolute; visibility: hidden;">Her kan indsættes hvad som helst (billede, knap, etc.)</div>
</body>
</html>

Du må endelig skrive hvis der er andre problemer! :)

Mvh.

- Snap

Synes godt om

crazysnap Seniormester

18. februar 2007 - 17:55 #7

Hov, og du kan selvfølgelig bare fjerne knappen fra html-scriptet nu :). Den gør intet (som der også står i message boxen når du klikker på den).

Mvh.

- Snap

Synes godt om

per2000 Nybegynder

18. februar 2007 - 18:01 #8

Det har jeg prøvet - den starter ikke
Den skal også slukke til sidst

Synes godt om

crazysnap Seniormester

18. februar 2007 - 18:08 #9

Det lyder lidt mærkeligt, kopierer du koden direkte over i en ny html-fil og kører den? Og hvad mener du med slukke? Skal "cursoren" stå stille ved sidste punkt? Eller skal den gøres usynlig ved sidste punkt? :)

Synes godt om

per2000 Nybegynder

18. februar 2007 - 18:16 #10

Den skal være usynlig til sidst

Ja jeg har bare droppet den på en i en ny html-fil
Fjerner jeg button starter curseren ikke

Synes godt om

crazysnap Seniormester

18. februar 2007 - 18:21 #11

:) Det forstår jeg slet ikke. Kopierer lige det hele ind igen og ja cursoren bliver usynlig til sidst. Har testet det i IE, FireFox og Opera og der virker det hele fint hos mig. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Moving Cursor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">

var speed = 3; //Speed of cursor (larger value = faster movement)

//Internal members
var x;
var y;
var divTag;
var position;
var len;

//Array of points defining the path of the cursor (div-tag)
var arrPoints = new Array();
arrPoints[0] = "10,10"; //Starting point
arrPoints[1] = "100,100"; //move to second point
arrPoints[2] = "20, 300"; //move to third point
arrPoints[3] = "300, 200"; //move to fourth point

function PerformMovement(cursorId)
{
//Grab cursor div-tag
divTag = document.getElementById(cursorId);

//Make sure it is visible
divTag.style.visibility = 'visible';

//Reset point position pointer
position = 0;

//Initialize first linear path
MoveLinear();
}

function MoveLinear()
{
if(position+1 == arrPoints.length)
{
divTag.style.visibility = 'hidden';
return;
}

//Get the two points
var start = arrPoints[position].split(",");
var end = arrPoints[++position].split(",");

//define vector between the two points
var x1 = parseFloat(end[0]) - parseFloat(start[0]);
var y1 = parseFloat(end[1]) - parseFloat(start[1]);

//Distance between the two points
len = Math.sqrt((x1*x1) + (y1*y1));

//Normalize vector creating a direction vector
x = x1 / len;
y = y1 / len;

//Call the "rendering" method
MoveTo(0, parseFloat(start[0]), parseFloat(start[1]));
}

function MoveTo(pos, posStartX, posStartY)
{
//Calculate new position by the start point and direction vector
var t1 = posStartX + (x*pos);
var t2 = posStartY + (y*pos);

//New position of "cursor"
divTag.style.left = t1 + "px";
divTag.style.top = t2 + "px";

//Calculate distance between start point and new point
var g1 = t1 - posStartX;
var g2 = t2 - posStartY;
var len1 = Math.sqrt(g1*g1 + g2*g2);

//Check if new point exceeds the linesegment
if(len1 < len)
{
pos += speed;
setTimeout("MoveTo("+ pos +", "+ posStartX +", " + posStartY + ")", 1);
}
else
MoveLinear();
}

</script>
</head>
<body onload="PerformMovement('cursor');">
<table>
<tr>
<td>
bla bla, tryk på knappen:
</td>
</tr>
<tr>
<td colspan="2">
bla bla bla
</td>
</tr>
</table>
<div id="cursor" style="position: absolute; visibility: hidden;">Her kan indsættes hvad som helst (billede, knap, etc.)</div>
</body>
</html>

Synes godt om

per2000 Nybegynder

18. februar 2007 - 18:27 #12

Tusinde tak - det virker perfekt

Synes godt om

crazysnap Seniormester

18. februar 2007 - 18:30 #13

Smukt, og held og lykke med det! :)

Tak for pointene!...

Mvh.

- Snap

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	2	21/05/202417:19	27/05/202410:59
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25
Beregning af sum via PHP og SQL Af dane022 i JavaScript	3	10/02/202421:38	12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript	2	27/12/202321:42	28/12/202314:41

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS