Javascript DOM CSS Style left Property move left and right in animation

Description

Javascript DOM CSS Style left Property move left and right in animation

View in separate window 

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <style> 
        #divAdvert { //  ww w  . j  av  a  2s .  co  m
            position: absolute; 
            font: 12px Arial; 
            top: 4px; 
            left: 0px; 
        } 
    </style> 
</head> 
<body> 
    <div id="divAdvert"> 
        Here is an advertisement. 
    </div> 

    <script> 
        let direction = 2; 

        function doAnimation() { 
            let divAdvert = document.getElementById("divAdvert"); 
            let currentLeft = divAdvert.offsetLeft; 

            if (currentLeft > 400  || currentLeft < 0) { 
                direction = -direction; 
            } 
            let newLocation = currentLeft + direction; 

            divAdvert.style.left = newLocation + "px"; 
        } 

        setInterval(doAnimation, 10); 
    </script> 
</body> 
</html>



PreviousNext

Related