用javascript实现以个动画效果（可以上下左右的移动）
在html 中可以这样的来实现 动画效果
有单一的
位移
尺寸
大小
的动画效果
在javascript中可以这样的来实现
setTimeout
<html>
<head>
<link href="styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
// <!CDATA[
var index = 0;
function Button1_onclick() {
Play();
}
var interval = 100;
var ending = "";
function Play() {
document.getElementById("imgRabit").src = "images/rabit_" + (index + 1)+ending + ".png";//所需 的图片
index++;
if (index == 8) {
index = 0;
}
window.setTimeout(Play, interval);
}
function OnKeyPress(e) {
//debugger; 出现错误时调试
}
var steps = 5;
var speed = 50;
function Right() {
if (ending == "") {
ending = "1";
}
if (steps == 0) {
steps = 5;
return;
}
if (steps >0) {
steps--;
var left = (document.getElementById("imgRabit").style.left != "") ? document.getElementById("imgRabit").style.left.replace("px", "") : document.getElementById("imgRabit").currentStyle.left.replace("px", "");
var newLeft = Number(left) + speed;
document.getElementById("imgRabit").style.left = newLeft + "px";
window.setTimeout(Right, 10);
}
}
function Left() {
if (ending == "1") {
ending = "";
}
if (steps == 0) {
steps = 5;
return;
}
if (steps > 0) {
steps--;
var left = (document.getElementById("imgRabit").style.left != "") ? document.getElementById("imgRabit").style.left.replace("px", "") : document.getElementById("imgRabit").currentStyle.left.replace("px", "");
var newLeft = Number(left) - speed;
document.getElementById("imgRabit").style.left = newLeft + "px";
window.setTimeout(Left, 10);
}
}
var upSteps = 5;
function Down() {
if (upSteps == 0) {
upSteps = 5;
return;
}
if (upSteps > 0) {
upSteps--;
var top = (document.getElementById("imgRabit").style.left != "") ? document.getElementById("imgRabit").style.top.replace("px", "") : document.getElementById("imgRabit").currentStyle.top.replace("px", "");
var newTop = Number(top) + speed;
document.getElementById("imgRabit").style.top = newTop + "px";
window.setTimeout(Down, 10);
}
}
function Up() {
if (upSteps == 0) {
upSteps = 5;
Down();
return;
}
if (upSteps > 0) {
upSteps--;
var top = (document.getElementById("imgRabit").style.left != "") ? document.getElementById("imgRabit").style.top.replace("px", "") : document.getElementById("imgRabit").currentStyle.top.replace("px", "");
var newTop = Number(top) - speed;
document.getElementById("imgRabit").style.top = newTop + "px";
window.setTimeout(Up, 10);
}
}
window.onload = Play;
// ]]>
</script>
</head>
<body>
<div class="divMain">
<img class="divRabit" id="imgRabit" alt="" src="images/rabit_1.png" onkeypress="OnKeyPress(this)" /></p>
</div>
<table >
<tr>
<td>
</td>
<td>
<input type="button" value="向上↑" onclick="Up()" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="向左<-" onclick="Left()" />
</td>
<td>
</td>
<td>
<input type="button" value="向右->" onclick="Right()" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" value="向下↓" onclick="Down()" />
</td>
</tr>
</table>
</body>
</html>
其中的样式可以这样的来实现
css的代码可以这样的来实现：
styles/StyleSheet.css
.divMain
{
position: relative;
background-color: Blue;
top: 0px;
left: 0px;
height: 282px;
width: 1045px;
}
.divRabit
{
position: relative;
left: 456px;
top: 145px;
}