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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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 email邮箱正则
2008/10/08 PHP
PHP编程函数安全篇
2013/01/08 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
python 远程统计文件代码分享
2015/05/14 Python
python验证码识别的示例代码
2017/09/21 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
一道python走迷宫算法题
2018/01/22 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
中学生社会实践活动总结
2014/07/03 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
小学生读书笔记范文
2015/06/30 职场文书
五一晚会主持词
2015/07/01 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
导游词之西递宏村
2019/12/10 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android