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 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
javascript基本算法汇总
2016/03/09 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
python读写csv文件实例代码
2019/07/05 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
环保证明
2015/06/23 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
MySQL系列之三 基础篇
2021/07/02 MySQL
Mybatis是这样防止sql注入的
2021/12/06 Java/Android