elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  un simple efecto con jquery
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: un simple efecto con jquery  (Leído 2,436 veces)
jhonatanAsm


Desconectado Desconectado

Mensajes: 376



Ver Perfil WWW
un simple efecto con jquery
« en: 24 Marzo 2012, 18:10 pm »

Código
  1.  
  2. #imagen{
  3. position:absolute;
  4. border:10px solid yellow;
  5. width:400px;
  6. height:300px;
  7. list-style-type:none;
  8. border-radius:15px;
  9.  
  10. }
  11.  
  12. ul li{
  13. list-style-type:none;
  14.  
  15. }
  16.  
  17. #imagen ul li img #foto{
  18. border:10px solid yellow;
  19. width:300px;
  20. height:200px;
  21. list-style-type:none;
  22. border-radius:15px;
  23. }
  24.  
  25.  
  26. <script type="text/javascript" src="js/jquery.js"></script>
  27.  
  28. $(document).ready(function(){
  29.  
  30. var img =$('#link ul li').attr('dir');
  31. $('#imagen ul li img').attr('src',img);
  32. $('#imagen ul li img').css({
  33. 'position':'absolute',
  34. 'width':'400px',
  35. 'height':'300px',
  36. 'margin-left':'-40px',
  37. 'margin-top':'-18px'
  38.  
  39. });
  40.  
  41. $('#link ul li').mouseover(function(){
  42.  
  43. var img = $(this).attr('dir');
  44. $('#imagen ul li img').attr('src',img);
  45. $('#imagen ul li img').css({
  46. 'width':'400px',
  47. 'height':'300px'
  48. });
  49. });
  50.  
  51. });
  52.  
  53. </head>
  54.  
  55. <div id="marco">
  56.  
  57. <div id="link">
  58. <ul>
  59. <li dir="http://blogs.peru21.pe/huevinenlaoficina/gato-pollo.jpg">hola</li>
  60.  
  61. <li dir="http://2.bp.blogspot.com/_jt2ErO_S1CY/TK9pX6F91dI/AAAAAAAAAHM/jB0sANA8kAU/s1600/bsd-windows-linux.jpg">ruta</li>
  62.  
  63. <li dir="http://t0.gstatic.com/images?q=tbn:ANd9GcQwP4o37X2gmTIlC9wx2QkWWTt7Qf5Z0HgsuaB8kw5-ECeketjMDsU8ryDY">imagen 3</li>
  64.  
  65. <li dir="http://blogs.peru21.pe/huevinenlaoficina/gato-pollo.jpg">hola</li>
  66.  
  67. <li dir="http://2.bp.blogspot.com/_jt2ErO_S1CY/TK9pX6F91dI/AAAAAAAAAHM/jB0sANA8kAU/s1600/bsd-windows-linux.jpg">ruta</li>
  68.  
  69. <li dir="http://t0.gstatic.com/images?q=tbn:ANd9GcQwP4o37X2gmTIlC9wx2QkWWTt7Qf5Z0HgsuaB8kw5-ECeketjMDsU8ryDY">imagen 3</li>
  70.  
  71. </ul>
  72. </div>
  73.  
  74. <div id="imagen">
  75. <ul>
  76. <li><img id="foto"/>imagen1</li>
  77. </ul>
  78. </div>
  79.  
  80. </div>
  81. </body>
  82. </html>


« Última modificación: 24 Marzo 2012, 23:39 pm por jhonatanAsm » En línea

mi primer lenguaje fue ensamblador, tengo 60 años, y no creo que haya sido un error.

- La mayor complejidad de todas es hacer complejo algo que no lo es.

- El inteligente no es aquel que lo sabe todo sino aquel que sabe utilizar lo poco que sabe.
Spider-Net


Desconectado Desconectado

Mensajes: 1.165


Un gran poder conlleva una gran responsabilidad


Ver Perfil WWW
Re: un simple efecto con jquery
« Respuesta #1 en: 24 Marzo 2012, 18:44 pm »

Hola me llamo Geshi y sirvo para colorear los códigos y que la gente se digne a leerlos:



De nada.


En línea

jhonatanAsm


Desconectado Desconectado

Mensajes: 376



Ver Perfil WWW
Re: un simple efecto con jquery
« Respuesta #2 en: 24 Marzo 2012, 23:43 pm »

gracias men, no lo conocía a ese tal geshi xD, parece un camaleón =) . salu2.
En línea

mi primer lenguaje fue ensamblador, tengo 60 años, y no creo que haya sido un error.

- La mayor complejidad de todas es hacer complejo algo que no lo es.

- El inteligente no es aquel que lo sabe todo sino aquel que sabe utilizar lo poco que sabe.
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[duda] login con dialog jquery + efecto
Desarrollo Web
Dosjota 1 4,783 Último mensaje 5 Julio 2010, 01:28 am
por Pazador
efecto animate() de jQuery se ejecuta pero no se aprecia la animacion [Resuelto]
Desarrollo Web
4rkn63l 2 3,139 Último mensaje 12 Marzo 2012, 06:15 am
por 4rkn63l
Consulta simple AJAX con jQuery
Desarrollo Web
Xephiro 1 2,879 Último mensaje 26 Julio 2012, 10:45 am
por sexto
Simple ejecucion en java o jquery
PHP
sQs 4 1,838 Último mensaje 15 Julio 2013, 18:36 pm
por sQs
Como quitar un efecto de jquery
Desarrollo Web
:ohk<any> 1 2,438 Último mensaje 21 Marzo 2016, 15:26 pm
por MinusFour
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines