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
Ny bruger
Nybegynder
Opret
Preview
