¡Buenas a todos!
Primero de todo, soy nuevo por aquí, así que pido disculpas si me sale el post rarillo o no se poner bien el tema del código y esas cosas (es mi primerito día xD)
Estoy haciendo unas cuantas probaturas con Javascript y Jquery, entre ellas tener un DIV con una imagen dentro, que se mueva aleatoriamente dentro de otro DIV mayor.
Hasta ahí, todo perfecto, además le hago un "mirror" cambiandole el CSS a la imagen para que si va hacia la derecha, apunte a la derecha, y si va a la izquierda, pues izquierda. Pero ahora me asalta la duda de si se podría o no hacer que, cuando llegue a una posición, y antes de moverse hacia otra, cambie la url de la imagen por otra, y se mantenga en esa posicíon durante un par de segundos, quieta.
He intentado meterle un .delay(), .setTimeOut() y .setInterval() sin demasiado exito (no se si no se puede, o soy un poco cafre xD)
Pongo (o intento poner) el código Javascript
:
Código Javascript
:
Ver original$(document).ready(function(){
//usamos la funcion de la libreria backstretch para poner una imagen de fondo adaptable
$.backstretch("./bg.jpg");
//hacemos un for, y llamamos a la funcion tantas veces como
//divs a animar tengamos
var i =0;
for(i=0;i<2;i++){
var id = "flecha"+i;
var element = document.getElementById(id);
fAnimate(element);
}
});
//funcion para animar un div y que se mueva por la pantalla, pero dentro de otro div
function fAnimate(element){
//primero, obtenemos una nueva posicion dentro del div principal
//Llamamos a funcion que devolvera el nodo padre
var father = selpadre(element);
//Cogemos la siguiente posicion del div
var newpos = fNewPosition(father);
//ahora, sacamos la posicion anterior del div que queremos mover
var tcube = $(father);
var oldpos = tcube.position();
//llamamos a la función que calcula la velocidad de la animacion
var velocidad = fCalcSpeed([oldpos.top, oldpos.left], newpos);
//IF que va a mirar hacia donde se mueve, y va a "reflejar" la imagen para que mire hacia ese lado.
if(oldpos.left >= newpos[1]){
//va a la derecha
$(element).css({"-moz-transform":"scale(1, 1)","-webkit-transform":"scale(1, 1)","transform":"scale(1, 1)"});
} else {
//va a la izquierda
$(element).css({"-moz-transform":"scale(-1, 1)","-webkit-transform":"scale(-1, 1)","transform":"scale(-1, 1)"});
}
//tenemos las posiciones nuevas y viejas, tenemos la velocidad,
//solo queda llamar a la funcion de animar y que se mueva.
$(father).animate({ top: newpos[0], left: newpos[1]}, velocidad, function(){
fAnimate(element);
});
}
//funcion que devuelve una posicion aleatoria dentro del div principal
function fNewPosition(element){
//sacamos la posicion del div principal
var divprin = $("#principal");
var divcuad = $(element);
//obtenemos unos valores X e Y aleatorios que esten dentro del div principal
/*hay que restar al div principal el ancho y largo del div chiquitin, para que no se salga fuera del grande.*/
var randomX = Math.floor(Math.random() * (( divprin.width()-divcuad.width() )+1));
var randomY = Math.floor(Math.random() * (( divprin.height()-divcuad.height() )+1)););
//devolvemos los valores en forma de array
return [randomY, randomX];
}
//funcion que calcula la velocidad a partir de sus dos posiciones
function fCalcSpeed(oldpos, newpos) {
var x = Math.abs(oldpos[1] - newpos[1]);
var y = Math.abs(oldpos[0] - newpos[0]);
var testea = x > y ? x : y;
var modificador = 0.1;
var speed = Math.ceil(testea/modificador);
return speed;
}
//funcion que recibe un elemento y devuelve el elemento padre
function selpadre (elemento){
var pid=elemento.parentNode;
return pid;
}
El HTML no tiene mucho, un DIV grande, otro DIV dentro, y una imagen dentro más