js事件案例——小人快跑JavaScript

效果

小人快跑

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>#imgs{position:absolute;left:500px;top:200px;}
</style>
<body><img src="images/down-0.png" alt="" id="imgs"><script src="script.js"></script>
</body>
</html>

var imgs = document.getElementById("imgs");
var index = -1;
function fn(value){index++;if(index>4){index=0;}imgs.src ="images/"+value+"-"+index+".png";
}
document.onkeydown = function(e){var e= window.event|| e;switch(e.keyCode){case 37:imgs.style.left = imgs.offsetLeft-10+"px";fn("left") ;break;case 38:imgs.style.top = imgs.offsetTop-10+"px";fn("up");break;case 39:imgs.style.left = imgs.offsetLeft+10+"px";fn("right");break;case 40:imgs.style.top = imgs.offsetTop+10+"px";fn("down");break;}}

小人图片

**

统一资料见网盘：

**
链接：https://pan.baidu.com/s/1byEnA0qObmmgxBbC3_FGVg
提取码：3o7i

js事件案例——小人快跑JavaScript相关推荐

js-键盘事件案例-小人快跑
js-键盘事件案例-小人快跑案例思路: 利用键盘的keycode判断按了上下左右什么键,然后利用键盘事件onkeydown对小人的定位进行改变即可 css部分: 由于操纵的是小人的位置,所以我们要先 ...
小实操（3）: 利用键盘事件实现小人快跑
** 实例: 利用html表单和js的数学对象及函数做一个有验证码的简单登录表单实操:利用日期对象和方法以及其他相关知识实现简单的钟表功能 ....... js学习中的小实操(目录) ** ...
Javascript学习笔记（13_2） --js事件案例（小人快跑）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>小人快 ...
JavaScript事件——【小案例】小人快跑
效果图: images: 操作: 按"上" "下" "左" "右" 键控制小人移动方向步骤: ...
babylon.js小人快跑动画效果
babylon.js小人快跑动画效果 var createScene = function () {// This creates a basic Babylon Scene object (non- ...
小人快跑之WPF基础——图形与动画（一）
前言: 之前为了完成一些任务,因为公司只能限定一些网络访问且不能用存储设备进行拷贝,所以自己在家里写了一个demo就放到csdn的下载区回公司再下下来,令人意外的是这个非常小的demo居然两天里就有几 ...
小人快跑之WPF基础——图形与动画（二）
前言: 昨天说到了利用基于帧的动画来实现效果,这其实与WPF提供的图形与动画功能没有太大关系,在这里我们还是要关注一下WPF为我们提供的高级方法来解决问题. 本次主题将简述WPF中有关"图形 ...
JS小游戏-极速快跑
游戏图片: 源文件下载地址:点击下载 Javascript部分: /** 极速快跑 * Author: fdipzone * Date: 2012-07-15 * Ver: 1.0 */var gam ...
js-键盘事件案例-飞机发射子弹
js-键盘事件案例-飞机发射子弹一.先对飞机进行研究: css部分改变飞机的位置,所以要加定位 <style>#img{position:absolute;left:0px;top:0 ...

js事件案例——小人快跑JavaScript

效果

统一资料见网盘：

js事件案例——小人快跑JavaScript相关推荐

最新文章

热门文章

js事件案例——小人快跑JavaScript

效果

统一资料 见网盘：

js事件案例——小人快跑JavaScript相关推荐

最新文章

热门文章

统一资料见网盘：