鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）...

最新推荐文章于 2022-05-20 17:04:56 发布

dengluandai1740

最新推荐文章于 2022-05-20 17:04:56 发布

阅读量294

点赞数

原文链接：http://www.cnblogs.com/alex-xxc/p/9991025.html

版权

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

效果如下：

代码如下：

<!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>

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

dengluandai1740

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）...

在测试用鼠标点击按钮，使图片左右上下移动：效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/c...
复制链接

扫一扫

鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）...

“相关推荐”对你有帮助么？