Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] JS mover cartas al pasar ratón

Estas en el tema de JS mover cartas al pasar ratón en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/02/2013, 13:21
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 1 mes
Puntos: 17
Pregunta JS mover cartas al pasar ratón

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
  1. <html>
  2.  
  3. <head>
  4.     <title> Cartas suben y bajan
  5.     </title>
  6.     <style>
  7.    
  8.     #carta1 {
  9.     position: absolute;
  10.             /*Borde redondos*/
  11.     border-radius:7px;
  12.     -moz-border-radius: 7px;
  13.     -webkit-border-radius : 7px;
  14.     left: 5%;
  15.     top: 70%;
  16.     bottom: 10%;
  17.     width: 7%;
  18.     background-Color: #d40000;
  19.     color:red;
  20.     text-align: center;
  21.     }
  22.    
  23.     #carta2 {
  24.     position: absolute;
  25.     border-radius:7px;
  26.     -moz-border-radius: 7px;
  27.     -webkit-border-radius : 7px;
  28.     left: 15%;
  29.     top: 70%;
  30.     bottom: 10%;
  31.     width: 7%;
  32.     background-Color: #d40000;
  33.     text-align: center;
  34.     }
  35.    
  36.     #carta3 {
  37.     position: absolute;
  38.     border-radius:7px;
  39.     -moz-border-radius: 7px;
  40.     -webkit-border-radius : 7px;
  41.     left: 25%;
  42.     top: 70%;
  43.     bottom: 10%;
  44.     width: 7%;
  45.     background-Color: #d40000;
  46.     text-align: center;
  47.     }
  48.    
  49.     #carta4 {
  50.     position: absolute;
  51.     border-radius:7px;
  52.     -moz-border-radius: 7px;
  53.     -webkit-border-radius : 7px;
  54.     left: 35%;
  55.     top: 70%;
  56.     bottom: 10%;
  57.     width: 7%;
  58.     background-Color: #d40000;
  59.     text-align: center;
  60.     }
  61.    
  62.     #carta5 {
  63.     position: absolute;
  64.     border-radius:7px;
  65.     -moz-border-radius: 7px;
  66.     -webkit-border-radius : 7px;
  67.     left: 45%;
  68.     top: 70%;
  69.     bottom: 10%;
  70.     width: 7%;
  71.     background-Color: #d40000;
  72.     text-align: center;
  73.     }
  74.    
  75.     #carta6 {
  76.     position: absolute;
  77.     border-radius:7px;
  78.     -moz-border-radius: 7px;
  79.     -webkit-border-radius : 7px;
  80.     left: 55%;
  81.     top: 70%;
  82.     bottom: 10%;
  83.     width: 7%;
  84.     background-Color: #d40000;
  85.     text-align: center;
  86.     }
  87.     </style>
  88.     <script>
  89.     /*function para mover carta1*/
  90.         function encima()
  91.         {
  92.         var id = setInterval("encima()",1000);     
  93.         window.setTimeout( "clearInterval ("+id+")", 2000);
  94.        
  95.         document.getElementById('carta1').style .top='50%';
  96.         document.getElementById('carta1').style .bottom='30%';
  97.        
  98.         }
  99.         function sale()
  100.         {
  101.         window.setTimeout( "sale()", 10000);
  102.         document.getElementById('carta1').style .top='70%';
  103.         document.getElementById('carta1').style .bottom='10%';
  104.         }
  105.    
  106.     /*function para mover carta2*/
  107.         function encima2()
  108.         {
  109.         document.getElementById('carta2').style .top='50%';
  110.         document.getElementById('carta2').style .bottom='30%';
  111.         }
  112.         function sale2()
  113.         {
  114.         document.getElementById('carta2').style .top='70%';
  115.         document.getElementById('carta2').style .bottom='10%';
  116.         }
  117.        
  118.     /*function para mover carta3*/
  119.         function encima3()
  120.         {
  121.         document.getElementById('carta3').style .top='50%';
  122.         document.getElementById('carta3').style .bottom='30%';
  123.         }
  124.         function sale3()
  125.         {
  126.         document.getElementById('carta3').style .top='70%';
  127.         document.getElementById('carta3').style .bottom='10%';
  128.         }
  129.    
  130.     /*function para mover carta4*/
  131.         function encima4()
  132.         {
  133.         document.getElementById('carta4').style .top='50%';
  134.         document.getElementById('carta4').style .bottom='30%';
  135.         }
  136.         function sale4()
  137.         {
  138.         document.getElementById('carta4').style .top='70%';
  139.         document.getElementById('carta4').style .bottom='10%';
  140.         }  
  141.        
  142.     /*function para mover carta5*/
  143.         function encima5()
  144.         {
  145.         document.getElementById('carta5').style .top='50%';
  146.         document.getElementById('carta5').style .bottom='30%';
  147.         }
  148.         function sale5()
  149.         {
  150.         document.getElementById('carta5').style .top='70%';
  151.         document.getElementById('carta5').style .bottom='10%';
  152.         }
  153.        
  154.     /*function para mover carta6*/
  155.         function encima6()
  156.         {
  157.         document.getElementById('carta6').style .top='50%';
  158.         document.getElementById('carta6').style .bottom='30%';
  159.         }
  160.         function sale6()
  161.         {
  162.         document.getElementById('carta6').style .top='70%';
  163.         document.getElementById('carta6').style .bottom='10%';
  164.         }
  165.        
  166.     </script>
  167.    
  168. </head>
  169.  
  170. </html>

El BODY es el siguiente:

Código HTML:
Ver original
  1. <body bgColor="#32CD32">
  2.     <h1 align="center"> Cartas </h1>
  3.    
  4.     <p align="center"> Pase el ratón por las cartas para seleccionarlas. </p>
  5.     <!--Cartas con Eventos.-->
  6.     <div id="carta1" onMouseOver="encima()"; onMouseOut="sale()";> Carta 1 </div>
  7.     <div id="carta2" onMouseOver="encima2()"; onMouseOut="sale2()";> Carta 2 </div>
  8.     <div id="carta3" onMouseOver="encima3()"; onMouseOut="sale3()";> Carta 3 </div>
  9.     <div id="carta4" onMouseOver="encima4()"; onMouseOut="sale4()";> Carta 4 </div>
  10.     <div id="carta5" onMouseOver="encima5()"; onMouseOut="sale5()";> Carta 5 </div>
  11.     <div id="carta6" onMouseOver="encima6()"; onMouseOut="sale6()";> Carta 6 </div>
  12. </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.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1

Última edición por HackID1; 17/02/2013 a las 15:30
  #2 (permalink)  
Antiguo 17/02/2013, 18:59
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: JS mover cartas al pasar ratón

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 18/02/2013, 11:33
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 1 mes
Puntos: 17
Respuesta: JS mover cartas al pasar ratón

Cita:
Iniciado por emprear Ver Mensaje
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.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #4 (permalink)  
Antiguo 18/02/2013, 11:37
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: JS mover cartas al pasar ratón

Cita:
Iniciado por HackID1 Ver Mensaje
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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 18/02/2013, 13:38
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 2 meses
Puntos: 36
Respuesta: JS mover cartas al pasar ratón

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
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #6 (permalink)  
Antiguo 18/02/2013, 13:47
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 2 meses
Puntos: 36
Respuesta: JS mover cartas al pasar ratón

Un ejemplo practico para que te des una idea:

Este seria mi codigo jQuery:
Código Javascript:
Ver original
  1. $(document).ready(function (){
  2.     $("#carta1").hover(function() {
  3.         $("#carta1").animate({top: "20%"});
  4.     },function() {
  5.             $("#carta1").animate({top: "70%"});        
  6.     });
  7. });

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

Saludos.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #7 (permalink)  
Antiguo 18/02/2013, 13:48
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 2 meses
Puntos: 36
Respuesta: JS mover cartas al pasar ratón

Ademas te ahorras muchas lineas de codigo
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #8 (permalink)  
Antiguo 19/02/2013, 13:22
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 1 mes
Puntos: 17
Respuesta: JS mover cartas al pasar ratón

Cita:
Iniciado por Reedyseth Ver Mensaje
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
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1

Última edición por HackID1; 19/02/2013 a las 13:28
  #9 (permalink)  
Antiguo 19/02/2013, 18:17
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 2 meses
Puntos: 36
Respuesta: JS mover cartas al pasar ratón

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.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #10 (permalink)  
Antiguo 20/02/2013, 12:09
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 1 mes
Puntos: 17
Respuesta: JS mover cartas al pasar ratón

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
  1. <html>
  2.  
  3. <head>
  4.     <title> Cartas suben y bajan
  5.     </title>
  6.     <style>
  7.    
  8.     #carta1 {
  9.     position: absolute;
  10.             /*Borde redondos*/
  11.     border-radius:7px;
  12.     -moz-border-radius: 7px;
  13.     -webkit-border-radius : 7px;
  14.     left: 5%;
  15.     top: 70%;
  16.     bottom: 10%;
  17.     width: 7%;
  18.     background: url(carta.jpg);
  19.     color:red;
  20.     text-align: center;
  21.     }
  22.    
  23.     #carta2 {
  24.     position: absolute;
  25.     border-radius:7px;
  26.     -moz-border-radius: 7px;
  27.     -webkit-border-radius : 7px;
  28.     left: 15%;
  29.     top: 70%;
  30.     bottom: 10%;
  31.     width: 7%;
  32.     background: url(carta.jpg);
  33.     text-align: center;
  34.     }
  35.    
  36.     #carta3 {
  37.     position: absolute;
  38.     border-radius:7px;
  39.     -moz-border-radius: 7px;
  40.     -webkit-border-radius : 7px;
  41.     left: 25%;
  42.     top: 70%;
  43.     bottom: 10%;
  44.     width: 7%;
  45.     background: url(carta.jpg);
  46.     text-align: center;
  47.     }
  48.    
  49.     #carta4 {
  50.     position: absolute;
  51.     border-radius:7px;
  52.     -moz-border-radius: 7px;
  53.     -webkit-border-radius : 7px;
  54.     left: 35%;
  55.     top: 70%;
  56.     bottom: 10%;
  57.     width: 7%;
  58.     background: url(carta.jpg);
  59.     text-align: center;
  60.     }
  61.    
  62.     #carta5 {
  63.     position: absolute;
  64.     border-radius:7px;
  65.     -moz-border-radius: 7px;
  66.     -webkit-border-radius : 7px;
  67.     left: 45%;
  68.     top: 70%;
  69.     bottom: 10%;
  70.     width: 7%;
  71.     background: url(carta.jpg);
  72.     text-align: center;
  73.     }
  74.    
  75.     #carta6 {
  76.     position: absolute;
  77.     border-radius:7px;
  78.     -moz-border-radius: 7px;
  79.     -webkit-border-radius : 7px;
  80.     left: 55%;
  81.     top: 70%;
  82.     bottom: 10%;
  83.     width: 7%;
  84.     background: url(carta.jpg);
  85.     text-align: center;
  86.     }
  87.     </style>
  88.     <script>
  89.     /*function para mover carta*/
  90.     //Llamamos a function encima(x) la X es igual a el numero de la carta que muevas.
  91.         function encima(x)
  92.         {
  93.     //Le damos un valor a cartas = 'carta' + x
  94.         var cartas='carta'+ x
  95.         document.getElementById(cartas).style .top='50%';
  96.         document.getElementById(cartas).style .bottom='30%';
  97.         }
  98.        
  99.         function sale(x)
  100.         {
  101.         var cartas='carta'+ x
  102.         document.getElementById(cartas).style .top='70%';
  103.         document.getElementById(cartas).style .bottom='10%';
  104.         }
  105.        
  106.     </script>
  107.    
  108. </head>
  109.  
  110. <body bgColor="#32CD32">
  111.     <h1 align="center"> Cartas </h1>
  112.    
  113.     <p align="center"> Pase el ratón por las cartas para seleccionarlas. </p>
  114.     <!--Cartas con Eventos.-->
  115.     <div id="carta1" onMouseOver="encima(1)"; onMouseOut="sale(1)";> Carta 1 </div>
  116.     <div id="carta2" onMouseOver="encima(2)"; onMouseOut="sale(2)";> Carta 2 </div>
  117.     <div id="carta3" onMouseOver="encima(3)"; onMouseOut="sale(3)";> Carta 3 </div>
  118.     <div id="carta4" onMouseOver="encima(4)"; onMouseOut="sale(4)";> Carta 4 </div>
  119.     <div id="carta5" onMouseOver="encima(5)"; onMouseOut="sale(5)";> Carta 5 </div>
  120.     <div id="carta6" onMouseOver="encima(6)"; onMouseOut="sale(6)";> Carta 6 </div>
  121. </body>
  122. </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
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #11 (permalink)  
Antiguo 20/02/2013, 12:44
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 2 meses
Puntos: 36
Respuesta: JS mover cartas al pasar ratón

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.
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.

Etiquetas: html+javascript, web+general
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:09.