Cómo usar el temporizador js para hacer que el fondo div se mueva de izquierda a derecha. Todos los códigos.

Hola, escribí un ejemplo muy básico para ti. Consúltelo y optimícelo usted mismo según el efecto deseado.

Un ejemplo es este: mueva el mouse sobre el div y la imagen de fondo se moverá de izquierda a derecha, completamente hacia la derecha. Mueva el mouse sobre el div y el ícono de fondo se moverá de derecha a izquierda, completamente hacia la izquierda.

Nota: Este ejemplo utiliza el posicionamiento porcentual de la imagen de fondo para tener en cuenta los cambios en el ancho. Dependiendo de su situación, también puede utilizar la orientación por píxeles (px). lt; estilogt;

.bg-div?{

altura:?110px;

fondo:?url(/7Ls0a8Sm1A5BphGlnYG/sys/portrait/item/ 27267a776a746b7505.jpg)?0?center?no-repeat?#ccc;

}

lt;/stylegt;

lt;div?id=" J_BgDiv"?class="bg-div"gt;lt;/divgt;

lt;scriptgt;

(función()?{

var? div?=?document.getElementById('J_BgDiv');

//?Porcentaje de fondo (de izquierda a derecha, 0-100)

var?pos?=?0;

/?El fondo se mueve hacia la derecha o hacia la izquierda (0: derecha, 1: izquierda)

var?dir?=?0;

/? Cada Porcentaje de movimiento para controlar la velocidad

var?step?=?3;

div.addEventListener('mouseover',?function()?{

var?node?=?div;

dir?=?0;

if(!div.mover)?{

div.mover?=? setInterval(function()?{

//?Mover 10 cada vez

if(dir?===?0)?{

pos? = ?paso;

}?else?{

pos?-=?paso;

}

pos?=?pos? gt;=?100100?:?pos;

pos?=?pos?lt;=?00?:?pos;?

node.style.backgroundPosition?=?pos ?' ?centro';

},?20);

}

},?false);

div. addEventListener('mouseout',?function()?{

dir?=?1;

},?false);

})();

lt;/scriptgt;

Espero que esto te ayude, si tienes alguna pregunta no dudes en preguntar.