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

效果如下：

代码如下：

<!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. sqlserver计算日期
			
    在网上找到的一篇文章,相当不错哦O(∩_∩)O~ 这是计算一个月第一天的SQL 脚本:  SELECT DATEADD(mm, DATEDIFF(mm,0,getdate()), 0) --当月的第一 ...
    
			
    2. 
						
  2. cs api 之一
			
    无法创建   无法创建网络   执行顺序  
    
			
    3. 
						
  3. tftp-hpa客户端使用说明
			
    1.板子 sudo apt-get install tftp-hpa 2.主机chmod 777 tftp—dir 3.tftp -4 192.168.1.122 -c put lib2.tar.gz ...
    
			
    4. 
						
  4. Jenkins一天中构建多次
			
    Build after other projects are built:在其他项目触发的时候触发,里面有分为三种情况,也就是其他项目构建成功.失败.或者不稳定的时候触发项目: Poll SCM:定时 ...
    
			
    5. 
						
  5. [SoapUI] JsonPath is to JSON what XPath is to XML
			
    1.通过JsonUtil验证Json的有效性 2.两种方式通过JPath读取Json的内容
    
			
    6. 
						
  6. java解决跨域
			
    方法中response.setHeader("Access-Control-Allow-Origin", "https://ding.taozugong.com" ...
    
			
    7. 
						
  7. 编写高质量代码改善C#程序的157个建议——建议114：MD5不再安全
			
    建议114:MD5不再安全 MD5不再安全不是就算法本身而言的.如果从可逆性的角度出发,MD5值不存在被破解的可能性. MD5被广泛应用于密码验证和消息完整性验证.假设新注册一个用户,当注册用户的密码 ...
    
			
    8. 
						
  8. 【Android学习】Service&Boradcast初步
			
    Service初步 掌握Service概念 掌握Service分类 Service开发能力具备 了解Service和intentService类的区别 重点难点 StartService和BoundS ...
    
			
    9. 
						
  9. 基于JDBC的数据库连接池技术研究与应用
			
    引言 近年来,随着Internet/Intranet建网技术的飞速发展和在世界范围内的迅速普及,计算机 应用程序已从传统的桌面应用转到Web应用.基于B/S(Browser/Server)架构的3层开 ...
    
			
    10. 
						
  10. UVA - 12424  Answering Queries on a Tree(十棵线段树的树链剖分)
			
    You are given a tree with N nodes. The tree nodes are numbered from 1 to N and have colors C1, C2,.  ...
    
			
    11.