键盘元素的控制小方块的移动效果

键盘元素的控制

ns4 = (document.layers)?true:false;
ie4 = (document.all)?true:false;
function init(){
if(ns4){block = document.blockDiv;}
if(ie4){block = blockDiv.style;}
block.xpos = parseInt(block.left);
block.active = false;
document.onkeydown = keyDown;
document.onkeyup = keyUp;
if(ns4){document.captureEvents(Event.KEYDOWN | Event.KEYUP);}
}
function keyDown(e){
if(ns4){var nkey=e.which;var iekey=0;}
if(ie4){var iekey=event.keyCode;var nkey=0;}
if((nkey==97 || iekey==65) && !block.active){
block.active = true;
slide();}
}
function keyUp(e){
if(ns4){var nkey=e.which;var iekey=0;}
if(ie4){var iekey=event.keyCode;var nkey=0;}
if(nkey==97 || iekey==65){
block.active = false;
}
}
function slide(){
if(block.active){
block.xpos += 5;
block.left = block.xpos;
status = block.xpos;
setTimeout("slide()",30);
}
}

//Javascript Document


请按"A"键，使方块滑动

~v~

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 键盘元素的控制小方块的移动效果

    键盘元素的控制 ns4 = (document.layers)?true:false; ie4 = (document.all)?true:false; function init(){ if(ns4){block = document.blockDiv;} if(ie4){block = blockDiv.style;} block.xpos = parseInt(block.left); block.active = false; document.onkeydown = keyDown;

  • javascript利用键盘控制小方块的移动

    本文实例为大家分享了利用键盘控制小方块的移动,供大家参考,具体内容如下 原理 1. 利用键盘控制移动,则需要了解onkeydown函数,表示某个按键被按下,可以以此绑定一个事件响应函数,当键盘被按下时候,触发此事件,进行移动 2. keyCode 对于keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码.对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码.虚拟键盘码可能和使用的键盘的布局相关. 因此我们可以根据keycode返回的字符码来判断用户所

  • 浅谈js键盘事件全面控制

    主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypr

  • jquery实现拖拽小方块效果

    jquery实现拖拽小方块效果

    今天来讲一个很常用的拖拽功能,主要是利用一点css,js和jquery,很简单但同时也很重要,掌握好才是最关键的! 下面来看下效果图: 这里可以看到,在鼠标hover的时候会有一个透明度的变化和一个盒子阴影!并且在右下角会实时的显示出小方块移动时横纵坐标的变化! 可以看到有一个盒子阴影 在鼠标单击按住的时候会变红,然后可以拖动小块随意移动 我们在看代码之前可以先了解下jquery中的基本知识(选择器,css控制器什么的)和offset()和clientX,clientY.思路很简单,就是分别监听

  • js代码实现随机颜色的小方块

    下面一段代码就是用js实现的随机颜色的小方块,不多说了代码很简单,直接上代码了. /**/js注释已删 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF- "> <meta charset="utf- "> <title>koringz&l

  • css列表前的小方块

    自己用个符号·来代替,却发现怎么显示都比较小,后来自己研究才发现我的字体全部定义成tahoma了,只要采用"宋体"就正常了. 列表前的小方块--design by 我们 body{font:14px tahoma;} a:link,a:visited{text-decoration:none;font-family:"宋体";color:#999999;} a:hover{color:red;text-decoration:underline;} ul{list-s

  • 表单内同名元素的控制

    复制代码 代码如下: <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <title>同名元素的控制</title>  <script language="javascript">      function setFlag(aObj)          

  • 微信小程序实现九宫格效果

    微信小程序实现九宫格效果

    本文实例为大家分享了微信小程序实现九宫格效果的具体代码,供大家参考,具体内容如下 1.九宫格实现示例图: Tips: 说明: 使用 display: -webkit-flex;对布局做兼容. 保证每排三个图标的两对对齐,采用:justify-content: space-between;属性. 父元素必须设置 flex-wrap: wrap;属性进行换行,否则会在一排展示. 个子元素的宽度width: 33.33333333%;按照其占位大小分配. 使用justify-content:cente

  • 微信小程序 tabs选项卡效果的实现

    微信小程序 tabs选项卡效果的实现

    微信小程序 tabs选项卡效果 前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三

  • js实现的彩色方块飞舞奇幻效果

    js实现的彩色方块飞舞奇幻效果

    本文实例讲述了js实现的彩色方块飞舞奇幻效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } ul { list-style:none; margin:0; padding:0; } li

随机推荐