[SOLUCIONADO] JS mover cartas al pasar ratón

HackID1 · #1 (**permalink**) 17/02/2013, 13:21

Hola a todos bueno dejo este código que básicamente permite mover o modificar el tamaño de una carta cuando se pasa el ratón por encima de esta, y se vea como un movimiento de ella.

-El fallo que tengo en este código el cual he hecho yo es que no se como mantener la carta arriba un tiempo y cuando quito el ratón esta baje, como ven si prueban el código se ve muy rapido ese movimiento, pero bueno aun asi lo dejo expuesto aquí, apenas estoy empezando en JScript pero me gustaría dejarlo para que los expertos lo modifiquen y me ayuden a hacer un código mejor.

Código Javascript:

Ver original<html>
 
<head>
    <title> Cartas suben y bajan
    </title>
    <style>
    
    #carta1 {
    position: absolute;
            /*Borde redondos*/
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px;
    left: 5%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background-Color: #d40000;
    color:red;
    text-align: center;
    }
    
    #carta2 {
    position: absolute;
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px; 
    left: 15%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background-Color: #d40000;
    text-align: center;
    }
    
    #carta3 {
    position: absolute;
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px;
    left: 25%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background-Color: #d40000;
    text-align: center;
    }
    
    #carta4 {
    position: absolute;
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px;
    left: 35%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background-Color: #d40000;
    text-align: center;
    }
    
    #carta5 {
    position: absolute;
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px;
    left: 45%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background-Color: #d40000;
    text-align: center;
    }
    
    #carta6 {
    position: absolute;
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px;
    left: 55%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background-Color: #d40000;
    text-align: center;
    }
    </style>
    <script>
    /*function para mover carta1*/
        function encima()
        {
        var id = setInterval("encima()",1000);      
        window.setTimeout( "clearInterval ("+id+")", 2000); 
        
        document.getElementById('carta1').style .top='50%';
        document.getElementById('carta1').style .bottom='30%';
        
        }
        function sale()
        {
        window.setTimeout( "sale()", 10000); 
        document.getElementById('carta1').style .top='70%';
        document.getElementById('carta1').style .bottom='10%';
        }
    
    /*function para mover carta2*/
        function encima2()
        {
        document.getElementById('carta2').style .top='50%';
        document.getElementById('carta2').style .bottom='30%';
        }
        function sale2()
        {
        document.getElementById('carta2').style .top='70%';
        document.getElementById('carta2').style .bottom='10%';
        }
        
    /*function para mover carta3*/
        function encima3()
        {
        document.getElementById('carta3').style .top='50%';
        document.getElementById('carta3').style .bottom='30%';
        }
        function sale3()
        {
        document.getElementById('carta3').style .top='70%';
        document.getElementById('carta3').style .bottom='10%';
        }
    
    /*function para mover carta4*/
        function encima4()
        {
        document.getElementById('carta4').style .top='50%';
        document.getElementById('carta4').style .bottom='30%';
        }
        function sale4()
        {
        document.getElementById('carta4').style .top='70%';
        document.getElementById('carta4').style .bottom='10%';
        }   
        
    /*function para mover carta5*/
        function encima5()
        {
        document.getElementById('carta5').style .top='50%';
        document.getElementById('carta5').style .bottom='30%';
        }
        function sale5()
        {
        document.getElementById('carta5').style .top='70%';
        document.getElementById('carta5').style .bottom='10%';
        }
        
    /*function para mover carta6*/
        function encima6()
        {
        document.getElementById('carta6').style .top='50%';
        document.getElementById('carta6').style .bottom='30%';
        }
        function sale6()
        {
        document.getElementById('carta6').style .top='70%';
        document.getElementById('carta6').style .bottom='10%';
        }
        
    </script>
    
</head>
 
</html>

El BODY es el siguiente:

Código HTML:

Ver original<body bgColor="#32CD32">
    <h1 align="center"> Cartas </h1>
    
    <p align="center"> Pase el ratón por las cartas para seleccionarlas. </p>
    <!--Cartas con Eventos.-->
    <div id="carta1" onMouseOver="encima()"; onMouseOut="sale()";> Carta 1 </div>
    <div id="carta2" onMouseOver="encima2()"; onMouseOut="sale2()";> Carta 2 </div>
    <div id="carta3" onMouseOver="encima3()"; onMouseOut="sale3()";> Carta 3 </div>
    <div id="carta4" onMouseOver="encima4()"; onMouseOut="sale4()";> Carta 4 </div>
    <div id="carta5" onMouseOver="encima5()"; onMouseOut="sale5()";> Carta 5 </div>
    <div id="carta6" onMouseOver="encima6()"; onMouseOut="sale6()";> Carta 6 </div>
</body>

El movimiento de las cartas sería básicamente llamar estos eventos "onMouseOver="encimax()" y

" onMouseOut="saleX()" y modificar su top y bottom, es la manera en que lo he hecho yo.

Si saben otra forma eficaz lo pueden dejar aquí gracias!.
Apenas estoy empezando en JScript voy en las Funciones como ven.

Saludos y Gracias a los que ven los foros.

emprear · #2 (**permalink**) 17/02/2013, 18:59

Si bien no soy partidario de usar librería tan solo par un efecto, en tu caso cre que se justifica el uso de Jquery, mirá el uso de animate() entre otros

SAludos

HackID1 · #3 (**permalink**) 18/02/2013, 11:33

Cita:

Iniciado por emprear

Si bien no soy partidario de usar librería tan solo par un efecto, en tu caso cre que se justifica el uso de Jquery, mirá el uso de [URL="http://api.jquery.com/animate/"]animate()[/URL] entre otros

SAludos

Gracias por responder estoy mirando el animate() ya que nunca he hecho uso de Jquery la verdad no se muy bien que es, pero lo miro y si tu puedes ayudarme a aplicar esto al código te lo agradecería ya que apenas empiezo en JScript, aunque lo intentare.

emprear · #4 (**permalink**) 18/02/2013, 11:37

Cita:

Iniciado por HackID1

Gracias por responder estoy mirando el animate() ya que nunca he hecho uso de Jquery la verdad no se muy bien que es, pero lo miro y si tu puedes ayudarme a aplicar esto al código te lo agradecería ya que apenas empiezo en JScript, aunque lo intentare.

Date una vuelta por
http://viralpatel.net/blogs/understa...mate-function/
(hay deceneas de ejemplos) y practicá un poco

SAludos

Reedyseth · #5 (**permalink**) 18/02/2013, 13:38

Un gran trabajo para el senor jQuery como dice *emprear*. Una vez que lo empiezes a usar te vas a enamorar de la libreria, sin embargo hay que saber de javascript para hacer un uso correcto y mas eficaz.

Algo que tienes que tener en cuenta para alcanzar tu objetivo son los metodos de jQuery
- hover()
- animate()

Reedyseth · #6 (**permalink**) 18/02/2013, 13:47

Un ejemplo practico para que te des una idea:

Este seria mi codigo jQuery:

Código Javascript:

Ver original$(document).ready(function (){
    $("#carta1").hover(function() {
        $("#carta1").animate({top: "20%"});
    },function() {
            $("#carta1").animate({top: "70%"});        
    });
});

Y aqui esta el ejemplo en vivo:
http://fiddle.jshell.net/wkUzw/

Saludos.

Reedyseth · #7 (**permalink**) 18/02/2013, 13:48

Ademas te ahorras muchas lineas de codigo

HackID1 · #8 (**permalink**) 19/02/2013, 13:22

Cita:

Iniciado por Reedyseth

Ademas te ahorras muchas lineas de codigo

Muchas gracias he visto tu link y bueno eso de Jquery no lo he dado pero me gustaría aprenderlo por mi cuenta, recien empiezo en JScript, pero una cosa que note en el link que me diste con el ejemplo, es que la carta lo que hace es estirarse hacia arriba y no es lo que quiero,,

Yo decia que hiciera el movimiento cuando pasas el ratón por encima de subir y luego quitas el ratón y baja, o no se si es porque lo visualizo en Chrome, voy a mirar con otro navegador, y una duda, como hago para reciibir las notificaciones de lasrespuestas a las preguntas que hago en el foro.

Es que soy nuevo y no veo la opción y me responde alguien la pregunta y tengo que buscarla por la barra de buscar del foro sino no me llegan los mensajes.

Otra duda ese archivo lo has subido tu a internet, si es así me podrías indicar como hacerlo y que es necesario para esa página.

Muchas gracias a todos, aunque a un amigo mio hizo el mismo ejemplo mio pero la carta sin embargo sube y se queda ahi y luego baja y no se ve el "flash" que se ve en la mia y no uso Jquery ni nada de eso.

Saludos!!!!

Ya he leido sobre esa página la verdad esta muy bienn me gusto!!. la tendré en cuenta para probarla más seguido

Reedyseth · #9 (**permalink**) 19/02/2013, 18:17

Hola que tal, mira la carta hace ese comportamiento de arriba y hacia abajo por que yo lo indique, es solo una muestra para que veas que se puede hacer, no le di el comportamiento que tu querias, no es problema del explorador.

Despues de que veas un poco de jQuery te recomiendo que veas la funcion css() de jQuery para que aprendras a manipular los elementos y animate(), que es parecida pero les da el efecto como el ejemplo que te puse.

No subi ese archivo a internet por que lo puedes probar completamente en jsfiddle, donde esta el codigo que viste funcionando.

Puedes hacer el efecto de que suba con puro javascript, ahora si que es cuestion de que te ajustes a tus necesidades al hacerlo con puro codigo javascript o que uses ayuda de un framework como jQuery.

HackID1 · #10 (**permalink**) 20/02/2013, 12:09

Ok muchas graciias por responder el código lo he modificado hoy a una manera más sencilla que me han enseñado lo voy a editar arriba.

Y la pregunta de como hago para ver los mensajes nuevos cuando responden a las preguntas que hago en el foro... digo que me lleguen a la bandeja de entrada del www.forosdelweb.com porque no se como.

Gracias por todo!! el código modficado lo pongo arriba aunque el efecto sigue igual jeje.. pero es mucho más corto.

Es este:

Código Javascript:

Ver original<html>
 
<head>
    <title> Cartas suben y bajan
    </title>
    <style>
    
    #carta1 {
    position: absolute;
            /*Borde redondos*/
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px;
    left: 5%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background: url(carta.jpg);
    color:red;
    text-align: center;
    }
    
    #carta2 {
    position: absolute;
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px; 
    left: 15%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background: url(carta.jpg);
    text-align: center;
    }
    
    #carta3 {
    position: absolute;
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px;
    left: 25%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background: url(carta.jpg);
    text-align: center;
    }
    
    #carta4 {
    position: absolute;
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px;
    left: 35%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background: url(carta.jpg);
    text-align: center;
    }
    
    #carta5 {
    position: absolute;
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px;
    left: 45%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background: url(carta.jpg);
    text-align: center;
    }
    
    #carta6 {
    position: absolute;
    border-radius:7px;
    -moz-border-radius: 7px; 
    -webkit-border-radius : 7px;
    left: 55%;
    top: 70%;
    bottom: 10%;
    width: 7%;
    background: url(carta.jpg);
    text-align: center;
    }
    </style>
    <script>
    /*function para mover carta*/
    //Llamamos a function encima(x) la X es igual a el numero de la carta que muevas.
        function encima(x)
        {
    //Le damos un valor a cartas = 'carta' + x
        var cartas='carta'+ x
        document.getElementById(cartas).style .top='50%';
        document.getElementById(cartas).style .bottom='30%';
        }
        
        function sale(x)
        {
        var cartas='carta'+ x
        document.getElementById(cartas).style .top='70%';
        document.getElementById(cartas).style .bottom='10%';
        }
        
    </script>
    
</head>
 
<body bgColor="#32CD32">
    <h1 align="center"> Cartas </h1>
    
    <p align="center"> Pase el ratón por las cartas para seleccionarlas. </p>
    <!--Cartas con Eventos.-->
    <div id="carta1" onMouseOver="encima(1)"; onMouseOut="sale(1)";> Carta 1 </div>
    <div id="carta2" onMouseOver="encima(2)"; onMouseOut="sale(2)";> Carta 2 </div>
    <div id="carta3" onMouseOver="encima(3)"; onMouseOut="sale(3)";> Carta 3 </div>
    <div id="carta4" onMouseOver="encima(4)"; onMouseOut="sale(4)";> Carta 4 </div>
    <div id="carta5" onMouseOver="encima(5)"; onMouseOut="sale(5)";> Carta 5 </div>
    <div id="carta6" onMouseOver="encima(6)"; onMouseOut="sale(6)";> Carta 6 </div>
</body>
</html>

Lo unico que la misma función esta operativa para todas las cartas tanto desde la 1 como a la 6. asignando a la function encima(x) y function sale(x);

Saludos! muchas gracias. mirare lo de JQuery

Reedyseth · #11 (**permalink**) 20/02/2013, 12:44

Para ver cuando contestan en el foro, en la parte de arriba cuando estas logeado hay un menu que dice herramientas, ahi seleccionar 'seguir tema'.

La otra opcion es que cuando das una respuesta seleccionas 'ir a avanzado' y ahi tambien seleccionas seguir tema.