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

效果如下：

代码如下：

<!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. Openssl s_client命令
			
    一.简介 s_client为一个SSL/TLS客户端程序,与s_server对应,它不仅能与s_server进行通信,也能与任何使用ssl协议的其他服务程序进行通信 二.语法 openssl s_cl ...
    
			
    2. 
						
  2. 怎样下载网页中的js文件？
			
    1.按下F12,会看到调试的界面,如下图所示,先点击最上面的Resources选项,Frames--(你想下载的网址)--Script,下面就是全部的js文件啦,网站的图片啊什么的都可以下载了.
    
			
    3. 
						
  3. python移除系统多余大文件-乾颐堂
			
    文件多了乱放, 突然有一天发现硬盘空间不够了, 于是写了个python脚本搜索所有大于10MB的文件,看看这些大文件有没有重复的副本,如果有,全部列出,以便手工删除 使用方式 加一个指定目录的参数 比 ...
    
			
    4. 
						
  4. smarty 使用php函数
			
    strtotime() time() <{if strtotime($activity.start_time) gt time()}> <a href="?action=d ...
    
			
    5. 
						
  5. duilib界面库
			
    xml编写界面库 notify控制程序 win32程序 winmain主函数 复杂控件自绘
    
			
    6. 
						
  6. [SoapUI] 获取Cookie，并循环遍历当前Project下所有的Test Suite，Test Case，Test Step，将Cookie传递给这些Test Step
			
    import com.eviware.soapui.support.types.StringToStringMap //Get all th cookies in the response , her ...
    
			
    7. 
						
  7. OracleBulkCopy 修正帮
			
    using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Refle ...
    
			
    8. 
						
  8. [随笔]CENTOS7更换YUM源为163源(记录一下以防忘记)
			
    2016年2月16日,最新163源变更后的更新方法: 访问地址为:http://mirrors.163.com/.help/centos.html 首先备份源: mv /etc/yum.repos.d ...
    
			
    9. 
						
  9. winform 中TextBox只能输入数字
			
    textBox1.KeyPress+=TextNumber_KeyPress; private void TextNumber_KeyPress(object sender, KeyPressEven ...
    
			
    10. 
						
  10. scalaWindows和Linux搭建
			
    Windows搭建 https://www.cnblogs.com/freeweb/p/5623372.html Linux搭建 https://www.cnblogs.com/freeweb/p/5 ...
    
			
    11.