练习 - 小人移动
Posted 喻平华
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了练习 - 小人移动相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} #wrap{width:500px;height:500px;border: 1px solid green;margin:10px auto; position:relative;} #wrap img{position:absolute;top:0;left:0;} </style> </head> <body> <div id="wrap">按Q统计步数~ <img id="ren" src="images/b1.gif" > </div> <script> // 获取小人的对象 var Ren = document.getElementById(‘ren‘); // 绑定键盘按下的事件 document.onkeydown = function(event){ // 处理兼容性的问题 var e = window.event || event; // 设置人 每次移动的步长 var step = 10; /* w-87 s-83 a-65 d-68 */ switch (e.keyCode) { case 87: // 上 Ren.style.top = Math.max(0,Ren.offsetTop-step)+‘px‘; // Ren.style.top = Ren.offsetTop-step+‘px‘; changeImg(‘u1.gif‘,‘u2.gif‘); break; case 83: // 下 // alert(Ren.offsetTop); 当前top 值 // Ren.style.top = Ren.offsetTop+step+‘px‘; // 向下的边界 top 470 如果470 大 就取470 Ren.style.top = Math.min(470,Ren.offsetTop+step)+‘px‘; changeImg(‘b1.gif‘,‘b2.gif‘); break; case 65: // 左 // Ren.style.left = Ren.offsetLeft-step+‘px‘; Ren.style.left = Math.max(0,Ren.offsetLeft-step)+‘px‘; changeImg(‘l1.gif‘,‘l2.gif‘); break; case 68: // 右 // Ren.style.left = Ren.offsetLeft+step+‘px‘; Ren.style.left = Math.min(470,Ren.offsetLeft+step)+‘px‘; changeImg(‘r1.gif‘,‘r2.gif‘); break; case 81: alert(‘您一共走了‘+i+‘步~‘); } } // // 换图方法 // function changeImg(img1,img2){ // // 从绝对路径中截取 文件名 // var newTu = Ren.src.substr(Ren.src.lastIndexOf(‘/‘)+1); // // 根据方向来确定显示的图片 // if(newTu == img1){ // Ren.src = ‘images/‘+img2; // }else{ // Ren.src = ‘images/‘+img1; // } // } var i = 0; function changeImg(img1, img2){ if(i%2==0){ //或许只写i%2也是对的 Ren.src = ‘images/‘+img2; }else{ Ren.src = ‘images/‘+img1; } i++; } </script>
在线地址：http://yupinghua.com/practices/components/%E5%B0%8F%E4%BA%BA%E7%A7%BB%E5%8A%A8.html
以上是关于练习 - 小人移动的主要内容，如果未能解决你的问题，请参考以下文章
spring练习，在Eclipse搭建的Spring开发环境中，使用set注入方式，实现对象的依赖关系，通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段