1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180
| <html><head><title>Truc_qui_se_deplace</title>
<script type="text/javascript">
<!--
var the_timeout;
var the_coords = new Array("500:100","250:40","350:280","50:120","190:60","380:400","250:50","30:340","500:100");
// function getAnchors()
// this function gets the two anchor points of a segment
// of the path and then calls moveDiv() to move the
// DIV along that segment
//
function getAnchors(array_position)
{
var first_anchor = the_coords[array_position];
var second_anchor = the_coords[array_position+1];
array_position++;
if (array_position == the_coords.length-1)
{
array_position = 0;
}
moveDiv(array_position, first_anchor, second_anchor, 0, 0);
}
// function moveDiv()
// this function moves the DIV along a segment of the path
// based on the anchor points. It will keep calling
// itself with a setTimeout() until the DIV is at the end
// of the segment
//
function moveDiv(array_position, anchor_one, anchor_two,
horizontal_step_size, vertical_step_size)
{
var the_style = getStyleObject("myDiv");
if (the_style)
{
// get the first anchor
//
var first_points = anchor_one.split(":");
var first_left = parseInt(first_points[0]);
var first_top = parseInt(first_points[1]);
// get the second anchor
//
var second_points = anchor_two.split(":");
var second_left = parseInt(second_points[0]);
var second_top = parseInt(second_points[1]);
// if we don't know the step sizes to move the DIV, figure them out
//
if ((horizontal_step_size == 0) && (vertical_step_size == 0))
{
horizontal_step_size =
getStepSize(anchor_one, anchor_two, 0);
vertical_step_size =
getStepSize(anchor_one, anchor_two, 1);
}
// figure out the new coordinates
//
var new_left = first_left + horizontal_step_size;
var new_top = first_top + vertical_step_size;
// if we're at the end of the segment, set the coordinates to
// move the DIV to the end
//
if (atEndOfPath(horizontal_step_size, second_left, new_left)
||(atEndOfPath(vertical_step_size, second_top, new_top)))
{
new_left = second_left;
new_top = second_top;
}
// add the px or don't, depending on the browser
if (!document.layers)
{
new_left = new_left + "px";
new_top = new_top + "px";
}
// now actually move the DIV
//
the_style.left = new_left;
the_style.top = new_top;
// if we're at the end of the segment, get new anchors
// otherwise, call moveDiv() again with a new starting point
// along the segment
//
if ((parseInt(new_left) == parseInt(second_left)) &&
(parseInt(new_top) == parseInt(second_top)))
{
getAnchors(array_position);
}
else
{
var new_anchor_one = new_left + ":" + new_top;
var timeout_string = "moveDiv(" +
array_position + ", '" + new_anchor_one + "', '" +
anchor_two + "', " + horizontal_step_size + "," +
vertical_step_size + ");";
the_timeout = setTimeout(timeout_string, 50);
}
}
}
// function getStepSize()
// this figures out how much to move the DIV each time
//
function getStepSize(anchor_one, anchor_two, position)
{
var first_points = anchor_one.split(":");
var first_number = parseInt(first_points[position]);
var second_points = anchor_two.split(":");
var second_number = parseInt(second_points[position]);
var step_size = Math.round((second_number - first_number)/10);
return step_size;
}
// function atEndOfPath()
// if the DIV is about to be moved past the end point of
// the segment, this will return true. Otherwise, it will
// return false.
//
function atEndOfPath(the_step_size, second_number, new_number)
{
var the_end = false;
if (((the_step_size > 0) && (new_number > second_number)) ||
((the_step_size < 0) && (new_number < second_number)))
{
the_end = true;
}
return the_end;
}
function getStyleObject(objectId) {
// cross-browser function to get an object's style object given its
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
} // getStyleObject
// -->
</script>
</head>
<body>
<div id = "myDiv" style="position:absolute; top:100px; left:500px;"><img src="truc.gif">
</div>
<br>
<a href="#" onClick="getAnchors(0); return false;">start</a> <br>
<a href="#" onClick="clearTimeout(the_timeout); return false;">stop</a>
</body>
</html> |