Tema: JS mover cartas al pasar ratón
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/02/2013, 13:21
Avatar de HackID1
HackID1
 
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 meses
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