在测试用鼠标点击按钮，使图片左右上下移动：

效果如下：

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            width: 600px;

            height: 400px;

            margin: 100px auto 0;

            background: pink;

            position: relative;

        }

        img{

            width: 60px;

            height: 60px;

            position: absolute;

            top: 0px;

            left: 0px;

        }

        table{

            width: 120px;

            height: 120px;

            margin: 0 auto;

        }

    </style>

    <script>

        function move(num){

            var mario = document.getElementById("mario");

            var l = mario.style.left;//获取图片当前left值

            var t = mario.style.top;//获取图片当前top值

            l = Number(l.substr(0, l.length-2));//截取left值，去掉px    如果改成parseInt（）则会失效，详情继续往下看解决办法

            t = Number(t.substr(0, t.length-2));//截取top值，去掉px

            switch(num){

                case 0:

                    mario.style.top = (t-10)+"px";

                    break;

                case 1:

                    mario.style.left = (l+10)+"px";

                    break;

                case 2:

                    mario.style.top = (t+10)+"px";

                    break;

                case 3:

                    mario.style.left = (l-10)+"px";

                    break;

            }

        }

    </script>

</head>

<body>

<div>

    <img src="img.jpg" id="mario" alt=""/>

</div>

<table>

    <tr>

        <th colspan="3">点击移动图片</th>

    </tr>

    <tr align="center">

        <td colspan="3"><input type="button" value="↑" onclick="move(0)"></td>

    </tr>

    <tr>

        <td><input type="button" value="←" onclick="move(3)"></td>

        <td>㊣</td>

        <td><button onclick="move(1)">→</button></td>

    </tr>

    <tr align="center">

        <td colspan="3"><input type="button" value="↓" onclick="move(2)"></td>

    </tr>

</table>

</body>

</html>

在上面如果我们吧Number（）改成parseInt（） 我们会发现失效了，鼠标点击图片不会移动，反而会报错。

如果我们想换成parseInt()那我们可以这样改

把img图形的样式改为内联样式：

<img src="img.jpg" id="mario" alt="" style="position: absolute;top: 0px;left: 0px;"/>
这样再把l = Number(l.substr(0, l.length-2)); 改为l = parseInt(l.substr(0, l.length-2));就不会报错了
为什么会这样呢：
　　是因为style只能获取内联样式，所以使用parseInt就不能实现。

键盘控制图片移动：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            width: 600px;

            height: 400px;

            margin: 100px auto 0;

            background: pink;

            position: relative;

        }

        img{

            width: 60px;

            height: 60px;

            position: absolute;

            top: 0px;

            left: 0px;

        }

        table{

            width: 120px;

            height: 120px;

            margin: 0 auto;

        }

    </style>

    <script>

        window.onload = function () {

            document.onkeydown = function () {

                var event = event || window.event;//浏览器兼容问题

                var mario = document.getElementById("mario");

                var l = mario.style.left;//获取图片当前left值

                var t = mario.style.top;//获取图片当前top值

                l = Number(l.substr(0, l.length-2));//截取left值，去掉px

                t = Number(t.substr(0, t.length-2));//截取top值，去掉px

                switch(event.keyCode){

                    case 38:

                        mario.style.top = (t-10)+"px";

                        break;

                    case 39:

                        mario.style.left = (l+10)+"px";

                        break;

                    case 40:

                        mario.style.top = (t+10)+"px";

                        break;

                    case 37:

                        mario.style.left = (l-10)+"px";

                        break;

                }

            }

        }

        function move(num){

        }

    </script>

</head>

<body>

<div>

    <img src="img.jpg" id="mario" alt=""/>

</div>

</body>

</html>
												


											
鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）的更多相关文章
	

    
								
  1. js控制“鼠标点击按钮后，按钮消失“（可以自己添加video标签控制播放）
		
    
		
    2. 
						
  2. c++运行程序 鼠标点击按钮 (c++)(windows)
		
    简介 这是在黑漆漆的程序中,制造用户可点击的按钮,来决定程序下一步该作什么,的基本代码. 详解 头文件 <cstdio>和<windows.h> 结构体 //这不全别复制 st ...
    
		
    3. 
						
  3. CSS鼠标点击式变化图片透明度
		
    今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...
    
		
    4. 
						
  4. JavaScript001，鼠标点击改变文字或图片
		
    <h3>我的第一个Javascript</h3> <p id="demo1">1.点击按钮,改变内容!</p> <!-- 设置 ...
    
		
    5. 
						
  5. GUI编程笔记（java）08：GUI通过鼠标移动到按钮上更改背景色案例
		
    首先我们看看源代码如下: package cn.itcast_06; import java.awt.Button; import java.awt.Color; import java.awt.Fl ...
    
		
    6. 
						
  6. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；
		
    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...
    
		
    7. 
						
  7. JS控制鼠标点击事件
		
    鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...
    
		
    8. 
						
  8. WPF中当鼠标移到按钮上时，按钮的背景图片消失的问题
		
    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...
    
		
    9. 
						
  9. win32 htmlayout点击按钮创建新窗口，以及按钮图片样式
		
    最近在做一个C++ win32的桌面图形程序,我不是C++程序员,做这个只是因为最近没什么java的活. windows api,之前接触的时候,还是大学,那时用这个开发打飞机游戏纯粹是娱乐.现在基本 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. CloudStack 4.3功能前瞻
			
    今天CloudStack 4.3已经Feature Freeze了,不会再有新功能加入到这个版本里.我们也可以坐下来看看哪些功能是值得期待的.首先,4.3的UI也秉承扁平化设计,看着更加简洁清爽.见下 ...
    
			
    2. 
						
  2. Paradox
			
    克己博伦 当一个无法阻挡的力量,碰到了一个无法移动的物体?如果这个力量移动了物体,那么这个物体就不是无法移动的.如果这个力量没有移动物体,那么这个无法阻挡的力量就被挡了下来. 上帝能造出一个重到他自己 ...
    
			
    3. 
						
  3. Qt webkitwidgets模块和webenginewidgets模块
			
    问题 将Qt开发的程序从Qt5.5或更低的版本迁移到5.6或更高的版本时,会提示webkitwidgets是unknown module. Project ERROR: Unknown module( ...
    
			
    4. 
						
  4. 面向对象的JavaScript-004
			
    1. // Below is an example of how to use Object.create() to achieve classical inheritance. This is fo ...
    
			
    5. 
						
  5. zigbee之IAR环境搭建
			
    注册机第一个要选择: 为什么? 之前说CC2530是支持zigbee协议的无线芯片,其实它是这款硬件上有一个支持zigbee协议的无线电路,不仅有这款电路,而且还有一块cpu电路,它就是8051cpu ...
    
			
    6. 
						
  6. Perl 学习笔记－正则表达式应用篇
			
    1.以 m// 进行匹配 如:  m/roger/ ,  /roger/ 是它的简写;  在说明  qw// 时可以选择使用任何成对的定界符, 对应m//匹配也可以, 如写成:  m(roger)   ...
    
			
    7. 
						
  7. [ASP.NET MVC 小牛之路]03 - Razor语法(转)
			
    出处:http://www.cnblogs.com/willick/p/3224144.html Razor是MVC3中才有的新的视图引擎.我们知道,在ASP.NET中,ASPX的视图引擎依靠< ...
    
			
    8. 
						
  8. 38  写一个函数，求一个字符串的长度，在main函数中输入字符串，并输出其长度。
			
    题目:写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. public class _038PrintLength { public static void main(Stri ...
    
			
    9. 
						
  9. URAL 1698. Square Country 5(记忆化搜索)
			
    题目链接 题意 : 自守数的定义:如果某个数的平方的末尾几位数等于这个数,那么就称这个数为自守数.例如5*5=25,则5就是自守数.让你求不超过n位的自守数有多少 思路 : 实际上,自守数还有两个性质 ...
    
			
    10. 
						
  10. toolbox类
			
    新建Qt  应用,项目名称为“c”,基类选择“QWidget”,取消“创建界面”复选框的选中状态. 添加该工程的提供主要显示界面的函数所在的文件,在“c”项目名上单击鼠标右键,在弹出的快捷菜单中选择“ ...
    
			
    11.