首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >不能使对象移动。Javascript

不能使对象移动。Javascript
EN

Stack Overflow用户
提问于 2016-02-07 17:44:35
回答 2查看 165关注 0票数 0

为此,我使用了YouTube教程。我不明白为什么它不能工作。由于某种原因,当我按下AD时什么也没有发生。

代码语言:javascript
运行
复制
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #container{
    position: relative;
    height: 600px;
    width: 400px;
    outline: 2px solid black;
    }
    #character{
    position: absolute;
    height: 50px;   
    width: 50px;
    outline: 2px solid black;
    background-color: #FF6600;
    left: 0;
    }
</style>
<body onkeydown="anim">
<div id="container">
    <div id="character"></div>
</div>  
<script>
    var container = document.getElemnetById('container');
    var character = document.getElemnetById('character');
    var characterLeft = 0;
    function anim(e){
        if (e.keyCode == 97){
            characterLeft += 2;
            character.style.left = characterLeft + 'px';
        }
        if (e.keyCode == 100){
            characterLeft -= 2;
            character.style.left = characterLeft + 'px';
        }
    }
</script>
</body> 
</head>
</html> 

`

EN

回答 2

Stack Overflow用户

发布于 2016-02-07 17:48:00

使用这个

代码语言:javascript
运行
复制
<div id="pop" onclick="anim();">
<span>click me</span>
<div id="container">
    <div id="character">
    </div>
</div>
<script>
    var container = document.getElemnetById('container');
    var character = document.getElemnetById('character');
    var characterLeft = 0;
    function anim()
    {
        alert('yes it work!!');

        if (e.keyCode == 97){
            characterLeft += 2;
            character.style.left = characterLeft + 'px';
        }
        if (e.keyCode == 100){
            characterLeft -= 2;
            character.style.left = characterLeft + 'px';
        }
    }

</script>
</div>
票数 0
EN

Stack Overflow用户

发布于 2016-02-07 19:36:33

这是可行的。我还交换了按键效果-按"a“键将框移动到左侧,按"d”键将其移动到右侧。希望这能有所帮助。盖夫

代码语言:javascript
运行
复制
<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
        #container
        {
            position: relative;
            height: 600px;
            width: 400px;
            outline: 2px solid black;
        }

        #character
        {
            position: absolute;
            height: 50px;   
            width: 50px;
            outline: 2px solid black;
            background-color: #FF6600;
            left: 0;
        }
    </style>
    <body>
        <div id="container">
            <div id="character"></div>
        </div>  

    <script>
        var container = document.getElementById('container');
        var character = document.getElementById('character');
        var characterLeft = 0;

        document.onkeypress = function (e) { 
        e = e || window.event; 
        var charCode = e.charCode || e.keyCode;
            if (charCode == 97){
                characterLeft -= 2;
                character.style.left = characterLeft + 'px';
            };
            if (charCode == 100){
                characterLeft += 2;
                character.style.left = characterLeft + 'px';
            }
        }
    </script>
    </body> 
    </head>
    </html>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35251937

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档