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

效果如下：

代码如下：

<!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. 256. Paint House房屋染色
			
    ［抄题］: There are a row of n houses, each house can be painted with one of the three colors: red, blue ...
    
			
    2. 
						
  2. C#中接口声明属性，但是提示“接口”中不能有属性。
			
    C#中接口定义属性如下所示: using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
    
			
    3. 
						
  3. <<C++标准程序库>>中的STL简单学习笔记
			
    0. 内容为个人学习笔记, 仅供参考, 如有错漏, 欢迎指正! 1. STL中的所有组件都是由模板构成的, 所以其元素可以是任意型别的. 组件有: - 容器: 管理某类对象的集合. 不同的容器有各自的 ...
    
			
    4. 
						
  4. SNP芯片的原理
			
    Illumina的SNP芯片原理 Illumina的SNP生物芯片的优势在于: 第1,它的检测通量很大,一次可以检测几十万到几百万个SNP位点 第2,它的检测准确性很高,它的准确性可以达到99.9%以 ...
    
			
    5. 
						
  5. oracle imp使用
			
    1. 获取帮助 imp help=y 2. 导入一个完整数据库 imp system/manager file=bible_db log=dible_db full=y ignore=y 3. 导入一 ...
    
			
    6. 
						
  6. command >/dev/null 2>&1 解说
			
    0:表示键盘输入(stdin)1:表示标准输出(stdout),系统默认是1 2:表示错误输出(stderr) command >/dev/null 2>&1 &  ==  ...
    
			
    7. 
						
  7. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
			
    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性.  ...
    
			
    8. 
						
  8. Generated by NetworkManager、ubuntu DNS设置丢失（network-manager造成的情况）
			
    方法一:去掉重启 方法二:卸载network-manager 实测网络不稳,经常掉线(kalinux2.0环境)
    
			
    9. 
						
  9. Android R文件的id
			
    如果你用 apktoool 反编译过 apk 就知道,反编译后res/values 下有一个 public.xml 文件,内容如图     这个东西有什么用呢?   先从如何使用资源 ID 开始,在开 ...
    
			
    10. 
						
  10. APUE（3）---文件I/O (3)
			
    十二.函数sync.fsync和fdatasync 延迟写:传统的Unix系统在内核中设有缓冲区或页高速缓冲,大多数磁盘I/O都通过缓冲区进行,当我们向文件写入数据时,内核通常先将数据复制到缓冲区,然 ...
    
			
    11.