Question

所以我在这里得到了一个动画脚本的开头：

<div id="card5">
    <h4 class="y">Let me be your guide.</h4>
    <h1>Here's what I've got:</h1>

    <div id="a">
        <h4 id="aa">Creativity</h4>
    </div>

    <div id="b">
        <h4 id="bb">Know-how</h4>
    </div>

    <div id="c">
        <h4 id="cc">Familiarity</h4>
    </div>
</div>

<script type="text/javascript">
    var aa = document.getElementById("aa");
    var bb = document.getElementById("bb");
    var cc = document.getElementById("cc");

    var aamargin = style.aa.marginTop | 30;
    var bbmargin = style.bb.marginTop | 30;
    var ccmargin = style.cc.marginTop | 30;

    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementsByTagName("c");

    var aadown = true;
    var bbdown = true;
    var ccdown = true;

    a.onmouseover = amove;
    b.onmouseover = bmove;
    c.onmouseover = cmove;

    function amove() {
        window.alert("Herro!");
        if (aadown) {
            aaup();
            aadown = false;
        }
    }

    function aaup() {
        if (aamargin > 0) {
            aamargin -= 1;
            style.aa.marginTop = aamargin + "%";
            requestAnimationFrame(aaup);
        }
    }
</script>

当我鼠标悬停在第一个div（＆＃34; a＆＃34;）上时，当然没有任何反应。我放了一个警告框来查看amove（）函数是否被触发，而且它不是。警报从未被解雇。不知道为什么。它可能只是一个错字......

Answer 1

错误在这里：

var aamargin = style.aa.marginTop | 30;
var bbmargin = style.bb.marginTop | 30;
var ccmargin = style.cc.marginTop | 30;

我认为您的意思是aa.style而不是style.aa？

Answer 2

style.aa.marginTop | 30;的两个错误：

|是一个按位运算符，如果您需要逻辑OR，则需要||，如下所示：style.aa.marginTop || 30;
style未定义，您需要aa.style，如下所示：aa.style.marginTop || 30;

最后一件事：bmove和cmove未定义。

请参阅此处的修补示例：

＆＃13;

<div id="card5">
    <h4 class="y">Let me be your guide.</h4>
    <h1>Here's what I've got:</h1>

    <div id="a">
        <h4 id="aa">Creativity</h4>
    </div>

    <div id="b">
        <h4 id="bb">Know-how</h4>
    </div>

    <div id="c">
        <h4 id="cc">Familiarity</h4>
    </div>
</div>

<script type="text/javascript">
    var aa = document.getElementById("aa");
    var bb = document.getElementById("bb");
    var cc = document.getElementById("cc");

    var aamargin = aa.style.marginTop || 30;
    var bbmargin = bb.style.marginTop || 30;
    var ccmargin = cc.style.marginTop || 30;

    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementsByTagName("c");

    var aadown = true;
    var bbdown = true;
    var ccdown = true;

    bmove = cmove = amove; // just a quickfix

    a.onmouseover = amove;
    b.onmouseover = bmove;
    c.onmouseover = cmove;
  
  

    function amove() {
        window.alert("Herro!");
        if (aadown) {
            aaup();
            aadown = false;
        }
    }

    function aaup() {
        if (aamargin > 0) {
            aamargin -= 1;
            aa.style.marginTop = aamargin + "%";
            requestAnimationFrame(aaup);
        }
    }
</script>

＆＃13;

JavaScript不触发

2 个答案: