1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="css/new_file.css" />
  6. <script type="text/javascript" src="js/new_file.js" ></script>
  7. <title></title>
  8. </head>
  9. <body>
  10. <div id="mapDiv" style="position: absolute;top: 100px;left: 200px;width: 800px;height: 600px;border: 1px solid red;text-align: center;">
  11. <input type="button" value="start" id = "st" />
  12. <div id="t" style=\'width: 50px; background:url(img/t1.png);height: 48px;position: relative;left: 0px;background-size: 50px auto;top: 100px;\'></div>
  13. <div id="r" style=\'width: 50px; background:url(img/t1.png);height: 48px;position: relative;left: 0px;background-size: 50px auto;top: 200px;\'></div>
  14. </div>
  15. </body>
  16. <script type="text/javascript">
  17. var array = [["img/t1.png","img/t3.png","img/t6.png"]];
  18. var intervalInstance = -1;
  19. i = 0;
  21. function start()
  22. {
  23. tObj = document.getElementById("t");
  24. rObj = document.getElementById("r");
  25. intervalInstance = setInterval(move,100);
  27. }
  29. function move()
  30. {
  31. tl = parseInt(tObj.style.left.split("px")[0]);
  32. rl = parseInt(rObj.style.left.split("px")[0]);
  33. if(rl<=725)i=(i+1)%3
  34. else
  35. {
  36. clearInterval(intervalInstance);
  37. return;
  38. }
  39. tObj.style.left = (tl+10) + "px";
  40. tObj.style.backgroundImage = "url("+array[0][i]+")";
  41. rObj.style.left = (rl+25) + "px";
  42. rObj.style.backgroundImage = "url("+array[0][i]+")";
  43. }
  45. window.onload = function()
  46. {
  47. document.getElementById("st").onclick = start;
  48. }
  49. </script>
  50. </html>

 

版权声明：本文为dofstar原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dofstar/p/11570629.html