一個(gè)簡(jiǎn)單的js動(dòng)畫效果的疑惑？

html如下

<style>
    /* body {
        margin: 0;
    }
     */
    
    .buttoncon {
        height: 100px;
    }
    
    .control {
        display: block;
        float: left;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 40px 20px 0 20px;
        border: 1px solid black;
    }
    
    .moveleft {
        width: 200px;
        height: 200px;
        background: lightgreen;
        position: relative;
        left: -200px;
    }
</style>

<body>
    <div class="buttoncon">
        <div class='control' onmouseover='moveleft(document.getElementsByClassName("moveleft")[0],0)' onmouseout='moveleft(document.getElementsByClassName("moveleft")[0],-200)'>moveleft</div>
    </div>
    <div class="moveleft"></div>
</body>

`
js如下

var timer;

function moveleft(ele, target) {
    clearInterval(timer);
    var speed = (target - ele.offsetLeft) / 50;
    timer = setInterval(function() {
        if (
            (speed > 0 && ele.offsetLeft >= target) ||
            (speed < 0 && ele.offsetLeft <= target)
        ) {            clearInterval(timer);
            return;
        }
        ele.style.left = ele.offsetLeft + speed + "px";
    }, 20);
}

在body沒(méi)將margin設(shè)置為0之前，鼠標(biāo)移出.control時(shí)， .moveleft會(huì)持續(xù)向右移動(dòng)，而不是設(shè)想的向左移動(dòng)。在ie下測(cè)試也一樣。調(diào)試發(fā)現(xiàn)各個(gè)變量也沒(méi)問(wèn)題。
但是body的margin設(shè)置為0之后，就是正常的。有人知道這是什么原因造成的嗎？

回答

編輯回答

乞許

body有margin時(shí)offsetLeft的值和left的值有8的誤差
鼠標(biāo)移入當(dāng)offsetLeft到達(dá)目標(biāo)值0時(shí)left其實(shí)還是-8
鼠標(biāo)移出

speed=-4
left = -4 offsetLeft = 4
left = 0 offsetLet = 8
left = 4 offsetLeft = 12 
。。。

2018年7月18日 20:46

編輯回答

你好胸

首頁(yè)在我瀏覽器里，不加margin:0的話，body默認(rèn)的margin為8，不同瀏覽器可能結(jié)果不一樣，但是原因是一樣的。
你不加margin:0，導(dǎo)致body有個(gè)body，這個(gè)時(shí)候，你的moveleft盒子的offsetLeft和left是兩個(gè)不相等的值的，當(dāng)你的left為0的時(shí)候，你的offsetLeft是為8的。因?yàn)檫@個(gè)offsetLeft把body的margin也算進(jìn)去了。moveleft盒子結(jié)束移動(dòng)條件是offsetLeft>=0。
這個(gè)時(shí)候，你第一次移開(kāi)鼠標(biāo)，offsetLeft=0,left=-8.16。注意，這個(gè)時(shí)候speed為-4，moveleft盒子第一次移動(dòng)，left=0+-4 = -4。此時(shí)，盒子是向右移動(dòng)了4個(gè)單位，那么offsetLeft=4。
第二次移動(dòng)，left=4-4=0。此時(shí)，盒子再向又移動(dòng)4個(gè)單位，那么offsetLeft=8。
如此循環(huán)，offsetLeft是只會(huì)越來(lái)越大的，這樣的話，就不滿足if語(yǔ)句，這樣就會(huì)一直移動(dòng)下去了。

重點(diǎn)是因?yàn)椴患觤argin:0，moveleft盒子的offsetLeft和left是兩個(gè)不相等的值的。這就導(dǎo)致了邏輯上出現(xiàn)錯(cuò)誤。

2017年9月15日 16:11