Question

我正在尝试在div上实现一个小动画。每当我们点击div时，它必须向右移动。我写了一些代码，但它没有用。有人可以帮帮我吗？

这是我的代码

<style type="text/css">
    #animDiv
    {
        background-color:#6F0;
        width:87px;
        height:39px;
        left:10px;
    }
</style>
<script>
    function $(id)
    {
        return document.getElementById(id);
    }
    function moveRight()
    {   
        var elem     = $("animDiv");
        //var divPos = parseInt($("animDiv").style.left);
        var divPos   = $("animDiv").offsetLeft;
        var divWid   = $("animDiv").offsetWidth;

        if(divPos+divWid < 700) 
        {       
            $("animDiv").style.left = $("animDiv").style.left+100+"px";
        }
    }
</script>
<body>
    <div id="animDiv" onclick="moveLeft()">
    </div>
</body>

Answer 1

尝试替换此代码

<div id="animDiv" onclick="moveLeft()">

使用此代码

<div id="animDiv" onclick="moveRight()">

并将样式position:fixed;添加到您的CSS中。

Answer 2

您的代码中存在以下几个问题：

您正在调用错误的函数。它被声明为moveRight()
您正在尝试更改left属性，该属性不会对静态定位的元素产生任何影响。
元素只会轻轻一次。之后，left属性的值类似于100px100px。

这是怎么回事：

function moveRight() {
    var elem = $("animDiv");
    //var divPos        =   parseInt($("animDiv").style.left);
    var divPos = $("animDiv").offsetLeft;
    var divWid = $("animDiv").offsetWidth;
    if (divPos + divWid < 700) {
        var curLeft = Number($("animDiv").style.left.replace("px", ""));
        $("animDiv").style.left = (curLeft + 100) + "px";
    }
}

JSFiddle

移动div右侧动画不起作用

2 个答案: