JS实现元素上下左右移动效果
本文实例为大家分享了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 Select和Option列表元素上下左右移动
作者 马嘉楠 New Document var currentSel = null; function move(){ if(arguments.length==1){ moveUp(arguments[0]); }else if(arguments.length==2){ moveRight(arguments[0],arguments[1]); } } function moveUp(direction){ if(currentSel == null) return; var index =
-
JavaScript如何实现组合列表框中元素移动效果
首先给大家说下组合框和列表框的区别: 组合框包括列表框和文本框的功能 文本框:只能输入数据 列表框:只能选择数据 组合框:既能输入数据,又能选择`` 应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 . 实现的基本思想: (1)编写init方法对两个列表框进行初始化: (2)为body添加onload事件调用init方法: (3)编写move(s1,s2)把s1中选中的选项移到s2; (4)编写moveAll(s1,s2)把s1中所有的选项都移到s2. (5)为按钮添
-
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的.且每次元素都是对齐到网格的. 先根据demo说明一下思路和细节,后面会给出demo代码. 1. 确定元素的每次移动的最小单位(demo中为10px和10px),也就是每次水平或垂直的位移量都是10px.铺上一层网格背景是为了帮助我们更好的看到效果
-
JS实现静止元素自动移动示例
一个元素是静止的,使它在屏幕上实现自动移动. 这是一个比较简单问题,在学习中遇到了,把它写了下来. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> #sp1{ bo
-
Javascript实现数组中的元素上下移动
前言 我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例.写起来也没有没麻烦,无非是交换数组元素.最终实现代码如下,比较重要的是那个函数. 示例代码: // 交换数组元素 var swapItems = function(arr, index1, index2) { arr[index1] = arr.splice(index2, 1, arr[index
-
JS实现元素上下左右移动效果
本文实例为大家分享了JS实现元素上下左右移动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { cursor: pointer; } #cell { width: 30px; height: 30px;
-
js实现方块上下左右移动效果
本文实例为大家分享了js实现方块移动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 50px; height: 50px; position: absolute; background
-
js游戏人物上下左右跑步效果代码分享
本文实例讲述了js游戏人物上下左右跑步效果.分享给大家供大家参考.具体如下: js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效.你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <!DOCTYPE html>
-
基于Two.js实现星球环绕动画效果的示例
Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁. Two.js 有一个内置的动画循环,可搭配其他动画库.Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中. 效果如下: 下面是核心js code HTML就不贴了,需要引入two.js文件
-
原生JS实现拖拽图片效果
本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a
-
JS实现淡入淡出图片效果的方法分析
本文实例讲述了JS实现淡入淡出图片效果的方法.分享给大家供大家参考,具体如下: 效果:鼠标移入时,图片由半透明逐渐变成清晰,移出时,由清晰变为半透明 分析:用变量来储存透明度,因为元素.style.alpha不能直接增加或减少 核心代码: window.onload=function(){ var oDiv=document.getElementById("div1"); var timer=null; var alpha=30; oDiv.onmouseover=function()
-
js实现简单鼠标跟随效果的方法
本文实例讲述了js实现简单鼠标跟随效果的方法.分享给大家供大家参考.具体分析如下: 鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动. 要点一: var oEvent = evt || window.event; 这个是为了兼容ie和ff而写的,在ie下window.event表示event对象,而ff下,是给事件函数传一个参数,这个参数就表示事件对象. 要点二: document.onmousemove = function(evt) 鼠标跟随是在鼠标移动时发生的事情.
-
简单实现js进度条加载效果
本文实例为大家分享了js进度条加载效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下载进度</title> <style> /*定义父容器*/ .content{ width: 500px; height: 200px; background: pin
-
实例讲解多个js毫秒倒计时同时进行效果
本文实例讲解js毫秒倒计时同时进行效果的代码,分享给大家供大家参考,具体内容如下 效果图: 实现功能:调用一个函数,传入html元素的id,和一个截止时间(unix时间戳),在该html元素中打印出到当前到截止时间为止的倒计时,精确到毫秒: 效果图如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" conte
-
js编写当天简单日历效果【实现代码】
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解
随机推荐
- jQuery中创建实例与原型继承揭秘
- C#无限栏目分级程序代码分享 好东西第1/3页
- iOS中关于信鸽推送的使用demo详解
- firefox火狐浏览器与与ie兼容的2个问题总结
- Android编程中聊天页面背景图片、标题栏由于键盘引起问题的解决方法
- Windows下修改mysql的data文件夹存放位置的方法
- php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
- 批处理一键关闭高危有害端口完整版(适合服务器使用)
- linux中定时任务crond命令使用方法
- Jquery拖拽并简单保存的实现代码
- 轻松创建nodejs服务器(7):阻塞操作的实现
- 剖析C++中的常量表达式与省略号的相关作用
- 如何判断一个数是否为4的幂次方?若是,并判断出来是多少次方?
- Java 高并发一:前言
- FleaPHP框架数据库查询条件($conditions)写法总结
- 推荐几个开源的微信开发项目
- 抖音vbs表白代码大全 抖音vbscript表白代码使用方法
- Docker容器应用日志查看方法
- python实现合并两个排序的链表
- layui的表单提交以及验证和修改弹框的实例