69 lines
1.3 KiB
HTML
69 lines
1.3 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3c.org/1999/xhtml">
|
|
<head>
|
|
<title>Moving Man</title>
|
|
<style type='text/css'>
|
|
body {
|
|
background:#000;
|
|
}
|
|
|
|
#stage {
|
|
position:relative;
|
|
width:630px;
|
|
height:473px;
|
|
margin:0 auto;
|
|
background:#fff;
|
|
overflow:hidden;
|
|
}
|
|
|
|
#m {
|
|
position:absolute;
|
|
bottom:0;
|
|
left:0;
|
|
}
|
|
</style>
|
|
<script type='text/javascript'>
|
|
function begin() {
|
|
img1=new Image()
|
|
img1.src="m1.png"
|
|
img2=new Image()
|
|
img2.src="m2.png"
|
|
document.getElementById("stage").innerHTML="<img id='m' src='img/m1.png' alt='' />"
|
|
man()
|
|
manmove()
|
|
}
|
|
n=1
|
|
l=0
|
|
function man() {
|
|
document.getElementById("m").src="img/m"+n+".png"
|
|
if (n==1)
|
|
n=2
|
|
else
|
|
n=1
|
|
|
|
m=setTimeout("man()",100)
|
|
}
|
|
|
|
function manmove() {
|
|
document.getElementById("m").style.left=l+"px"
|
|
|
|
if (document.getElementById("m").style.left=="580px")
|
|
document.getElementById("m").className="y"
|
|
else if (document.getElementById("m").style.left=="0px")
|
|
document.getElementById("m").className=""
|
|
|
|
if (document.getElementById("m").className=="")
|
|
l=l+20
|
|
else
|
|
l=l-20
|
|
|
|
mm=setTimeout("manmove()",200)
|
|
}
|
|
|
|
window.onload=begin
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id='stage'></div>
|
|
</body>
|
|
</html> |