javascript解析人体运动

<html>
 <head>

        <script>
  var xp=0;
  var imgIndex=1;
  var moveTimer;
  function move(){
   xp=xp+20;   //每一次div的位移的辐度
   document.getElementById('red').style.left=xp+'px'; //开始的位置,px像素
   imgIndex=imgIndex==5?1:(imgIndex+1); //图片的数量,结束之后从第一张开始循环;
   document.getElementById('red').className='img'+imgIndex //图片的循环
   if(xp>=1290)
    clearInterval(moveTimer);  //用于限制跑的距离,超出将会被终止;
  }
  window.onload=function(){ moveTimer=setInterval(move,80);}  //移动的速度
  </script>
  <!-- 在一张人体解析图片上,获取每个动作的高和宽以及从最左边到这个动作的距离,每个动作建立坐标; -->
<style> 
.img1{
background:url("ZU.jpg") no-repeat scroll -30px 0 transparent;
width:151px;
height:205px;
}

.img2{
background:url("ZU.jpg") no-repeat scroll -188px 0 transparent;
width:151px;
height:205px;
}

.img3{
background:url("ZU.jpg") no-repeat scroll -332px 0 transparent;
width:151px;
height:205px;
}

.img4{
background:url("ZU.jpg") no-repeat scroll -473px 0 transparent;
width:124px;
height:205px;
}

.img5{
background:url("ZU.jpg") no-repeat scroll -588px 0 transparent;
width:145px;
height:205px;
}
</style>
  
 </head>
 <body>

<div id="red" class="img" style="position:absolute;left:0;top:0"></div> 
<!-- //设置图片的初始位置 -->
    
 </body>
</html>

你可能感兴趣的:(html,Web)