| Цитата(Coocky @ 25.1.2005, 22:20) | | мои знания скрипта |
JS, да? Хм... окей... щас чиркану 
| Код |
// рисунок динамический
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анимация рисунка</title>
<script language="JavaScript" type="text/javascript" src="animeLine.js"></script>
</script>
</head>
<body style="height:400px;" onload="initAnime()">
<form>
<input type="button" value="Слева-на-право"
onclick="initSLAnime('block', 100, 200, 500, 200, 5)">
<input type="button" value="По диагонали"
onclick="initSLAnime('block', 100, 200, 500, 500, 20)">
</form>
<div id="block" style="position:absolute; top:200px; left:100px; height:200px; width:200px; background-color:orange"></div>
</body>
</html>
// animeLine.js
var anime;
function initAnime() {
anime = {elemID:"",
xCurr:0,
yCurr:0,
xTarg:0,
yTarg:0,
xStep:0,
yStep:0,
xDelta:0,
yDelta:0,
xTravel:0,
yTravel:0,
vel:1,
pathLen:1,
interval:null
};
}
function initSLAnime(elemID, startX, startY, endX, endY, speed) {
initAnime();
anime.elemID = elemID;
anime.xCurr = startX;
anime.yCurr = startY;
anime.xTarg = endX;
anime.yTarg = endY;
anime.xDelta = Math.abs(endX - startX);
anime.yDelta = Math.abs(endY - startY);
anime.vel = (speed) ? speed : 1;
document.getElementById(elemID).style.left = startX + "px";
document.getElementById(elemID).style.top = startY + "px";
anime.pathLen = Math.sqrt((Math.pow((startX - endX), 2)) +
(Math.pow((startY - endY), 2)));
anime.xStep = parseInt(((anime.xTarg - anime.xCurr) / anime.pathLen) * anime.vel);
anime.yStep = parseInt(((anime.yTarg - anime.yCurr) / anime.pathLen) * anime.vel);
anime.interval = setInterval("doSLAnimation()", 10);
}
function doSLAnimation() {
if ((anime.xTravel + anime.xStep) <= anime.xDelta &&
(anime.yTravel + anime.yStep) <= anime.yDelta) {
var x = anime.xCurr + anime.xStep;
var y = anime.yCurr + anime.yStep;
document.getElementById(anime.elemID).style.left = x + "px";
document.getElementById(anime.elemID).style.top = y + "px";
anime.xTravel += Math.abs(anime.xStep);
anime.yTravel += Math.abs(anime.yStep);
anime.xCurr = x;
anime.yCurr = y;
} else {
document.getElementById(anime.elemID).style.left = anime.xTarg + "px";
document.getElementById(anime.elemID).style.top = anime.yTarg + "px";
clearInterval(anime.interval);
}
}
|
Это было исп. мной для своих целей, подправь код как тебе нужно
Есть еще не прямолинейная анимация, нужна будет - пиши.
Работает под NN6+ & IE5+
Эффекты позже напишу. |
