Question

用“鼠标输入”四张图片从左向右移动。动画应该从每个“鼠标输入”开始。

并且存在问题：在第一个“鼠标输入”（和第一个动画）之后，第二个动画仅在几秒钟后才开始。但它应该直接从第二个 “鼠标输入”开始。

继续查看代码中的 console.log（）行，它们解释了我的意思。

<!doctype html>
<head>
    <style>
        * {
            margin: 0;padding: 0;
        }
    </style>

</head>
<body>
<div id="wrapper" style="width:300px;height:250px;border:1px solid #dcdddd; ">
    <a id="bild-move-1" href="" target="_blank" style="position: absolute; z-index: 4; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
    <a id="bild-move-2" href="" target="_blank" style="position: absolute; z-index: 3; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
    <a id="bild-move-3" href="" target="_blank" style="position: absolute; z-index: 2; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
    <a id="bild-move-4" href="" target="_blank" style="position: absolute; z-index: 1; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
</div>

<script>
//Initialize interval (and variables) outside of the interval
var interval = null;
var indexA = 0;
var ziel = 75;
var numberofThePic = 1;
var currentMove = -75;

//Function to start the animation
function startAnimation() {
    //Only set the interval if it hasn't already been set
    if (interval == null) {
        console.log("active");
        console.log(document.getElementById('bild-move-1').style.marginLeft);
        interval = setInterval(function() {
            if (numberofThePic <=4) {
                if (indexA < ziel){
                    currentMove = currentMove + 1;
                    document.getElementById('bild-move-'+ numberofThePic).style.marginLeft = currentMove + "px";
                    indexA++;
                } else {
                    indexA = 0;
                    numberofThePic = numberofThePic + 1;
                }
            } else {
             //otherwise, animation is complete, clear the interval
                reset();             
            }

        }, 10);
    }
}

function reset(){
    setTimeout(function(){ 
        for (var indexB = 4; indexB >= 1; indexB--) {
            document.getElementById('bild-move-'+ indexB).style.marginLeft = -75 + "px";
        } 
            indexA = 0;
            numberofThePic = 1;
            currentMove = -75;
            clearInterval(interval);
            interval = null;
            console.log("reset");
    }, 2000);
}      

wrapper.addEventListener("mouseenter", startAnimation);
</script>
</body>
</html>

用鼠标输入java脚本动画

0 个答案: