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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
了解JavaScript中的选择器
May 24 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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
php5中类的学习
2008/03/28 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php中autoload的用法总结
2013/11/08 PHP
php分页函数示例代码分享
2014/02/24 PHP
php显示页码分页类的封装
2017/06/08 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
jquery清空表单数据示例分享
2014/02/13 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现list反转实例汇总
2014/11/11 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python 中@property的用法详解
2020/01/15 Python
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
团日活动总结书格式
2014/05/08 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
自我管理的活动方案
2014/08/25 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
施工安全协议书范本
2014/09/26 职场文书
公司租房协议书范本
2014/10/08 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL