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

效果如下：

代码如下：

<!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. IIS网站最大并发连接数
			
    打开网站服务器IIS---[控制面板]-[管理工具]--[Internet信息服务IIS管理器]   打开应用程序池--找到网站对应使用的应用程序池--选择右侧[高级设置]   在[高级设置]窗口可看 ...
    
			
    2. 
						
  2. PropertyPlaceholderConfigurer使用及@Value使用注意事项
			
    思考 PropertyPlaceholderConfigurer和<context:property-placeholder/>有何区别? @Value在Controller层和Servi ...
    
			
    3. 
						
  3. vs2017编译并配置libcurl入门教程
			
    libcurl可以用来发送http请求,是c/c++发送http请求常用的库 下载libcurl源码包: libcurl下载地址:https://curl.haxx.se/download.html  ...
    
			
    4. 
						
  4. Ha-Federation-hdfs +Yarn集群部署方式
			
    经过一下午的尝试,终于把这个集群的搭建好了,搭完感觉也没有太大的必要,就当是学习了吧,为之后搭建真实环境做基础. 以下搭建的是一个Ha-Federation-hdfs+Yarn的集群部署. 首先讲一下 ...
    
			
    5. 
						
  5. sql复制表结构，复制表内容语句
			
    sql复制表结构,复制表内容语句 select * into b from a where 1<>1 select top 0 * into b from a insert into a  ...
    
			
    6. 
						
  6. UVa 10766 Organising the Organisation (生成树计数)
			
    题意:给定一个公司的人数,然后还有一个boss,然后再给定一些人,他们不能成为直属上下级关系,问你有多少种安排方式(树). 析:就是一个生成树计数,由于有些人不能成为上下级关系,也就是说他们之间没有边 ...
    
			
    7. 
						
  7. 'for' loop initial declarations are only allo
			
    linux系统下的c编程与windows有所不同,如果你在用gcc编译代码的时候提示‘for’ loop initial declarations are only allowed in C99 mo ...
    
			
    8. 
						
  8. Thrift辅助类，用于简化Thrift编程
			
    CThriftServerHelper用于服务端,CThriftClientHelper用于客户端. IDL定义: service PackageManagerService { } 服务端使用示例: ...
    
			
    9. 
						
  9. win7 64位备份时， 无法启动服务，0x80070422
			
    问题:当win7 64位系统在备份的时候,无法启动备份服务,错误代码:0x80070422 解决方法:计算机->管理->服务 找到 Block Level Backup Engine Se ...
    
			
    10. 
						
  10. windows游戏开发中一个关于Visual Studio的编译链接成功，输出窗口却显示线程已退出。无法运行项目的问题
			
    可能是显卡驱动程序版本太高了,退回到以前的版本就ok了. 第一次遇见这个问题可把我给整疯了!! 后来又遇到一次,参考之前的解决方法,很快就搞定了!! 可见,经验可是很重要的一个东西啊.
    
			
    11.