JS实现元素上下左右移动效果


Posted in Javascript onOctober 18, 2017

本文实例为大家分享了JS实现元素上下左右移动的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <style> 
  a { 
   cursor: pointer; 
  } 
  #cell { 
   width: 30px; 
   height: 30px; 
   background: red; 
   position: relative; 
   left: 0; 
   top: 0; 
  } 
 </style> 
</head> 
<body onload="move()"> 
 <p>友情提示:请按键盘上的上下左右键</p> 
 <div id="cell"></div> 
 <script> 
 
  function move() { 
   var a = document.getElementById("cell"); 
   a.style.left = 0; 
   a.style.top = 0; 
   document.onkeydown = function(e) { 
    var e = window.event ? window.event : e; 
    if(e.keyCode == 38) { //up 
     a.style.top = parseInt(a.style.top) - 50 + 'px'; 
     //注意要用parseInt 因为a.style.top类型是字符串 
    } 
    if(e.keyCode == 40) { //down 
     a.style.top = parseInt(a.style.top) + 50 + 'px'; 
    } 
    if(e.keyCode == 37) { //left 
     a.style.left = parseInt(a.style.left) - 50 + 'px'; 
    } 
    if(e.keyCode == 39) { //right 
     a.style.left = parseInt(a.style.left) + 50 + 'px'; 
    } 
   } 
  } 
 </script> 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery的$命名冲突详细解析
Dec 28 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
小程序实现多选框功能
Oct 30 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
JS去掉字符串中所有的逗号
Oct 18 #Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 #Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 #Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 #Javascript
VUE长按事件需求详解
Oct 18 #Javascript
vue router仿天猫底部导航栏功能
Oct 18 #Javascript
Node做中转服务器转发接口
Oct 18 #Javascript
You might like
用PHP创建PDF中文文档
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python奇偶行分开存储实现代码
2018/03/19 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
python中pop()函数的语法与实例
2020/12/01 Python
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
护理自荐信范文
2013/10/05 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
离婚协议书怎么写
2014/09/12 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2014年党总支工作总结
2014/12/18 职场文书
施工现场安全管理制度
2015/08/05 职场文书
七年级生物教学反思
2016/02/20 职场文书
《三国志》赏析
2019/08/27 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python