javascript代码实例教程-javascript解析人体运动

发布时间:2019-02-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript解析人体运动脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 <htML>

&nbsp;<head>

        <script>

  VAR xp=0;

  var imgindex=1;

  var moveTimer;

  function move(){

   xp=xp+20;   //每一次p的位移的辐度

   document.getElementById(&#39;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>

<p id="red" class="img" style="posITion:absolute;left:0;top:0"></p>  

<!-- //设置图片的初始位置 -->

     

 </body>

</html>

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-javascript解析人体运动全部内容,希望文章能够帮你解决javascript代码实例教程-javascript解析人体运动所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。