鼠标点击按钮控制图片移动或者键盘控制图片移动(解决问题:parseInt失效问题,用Number)...

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

效果如下:

鼠标点击按钮控制图片移动或者键盘控制图片移动(解决问题:parseInt失效问题,用Number)..._第1张图片

代码如下:

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图形的样式改为内联样式:


这样再把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>

 



转载于:https://www.cnblogs.com/alex-xxc/p/9991025.html

你可能感兴趣的:(鼠标点击按钮控制图片移动或者键盘控制图片移动(解决问题:parseInt失效问题,用Number)...)