JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<div></div>

CSS

div{
    width: 22.5em;
    height: 22.5em;
    position: relative;
    background: url(http://oi54.tinypic.com/28k3pjo.jpg);
}

JavaScript

var div = document.getElementsByTagName("div")[0],
    i = 0,
    movimiento = function(elem, rapidez){
        var left = elem.style.left.substring(0, elem.style.left.indexOf("p"));
        if (left % 100 === 0 || left === 0){        
            var tiempo = (function(){
                    switch (rapidez){
                        case "rapido": 
                            return 1; 
                            break;
                        case "normal":
                            return 5;
                            break;
                        case "lento": default:
                            return 10;
                            break;
                    }
                })(),
                intervalo = setInterval(function(){
                i++;
                elem.style.left = i + "px";
                if(i % 100 === 0) clearInterval(intervalo);
            }, tiempo);
        }
    };

div.style.left = div.style.left || 0;

div.addEventListener("mouseover", function(){
    movimiento(this, "lento");
}, false);