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

 

 


Tema destacado: Estamos en la red social de Mastodon


+  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,463 veces)
jhonatanAsm


Desconectado Desconectado

Mensajes: 376



Ver Perfil WWW
un simple efecto con jquery
« en: 24 Marzo 2012, 18:10 pm »
Código
  4.  
  5. #imagen{
  6. 	position:absolute;
  7. 	border:10px solid yellow;
  8. 	width:400px;
  9. 	height:300px;
  10. 	list-style-type:none;
  11. 	border-radius:15px;
  12.  
  13. }
  14.  
  15. ul li{
  16. list-style-type:none;
  17.  
  18. }
  19.  
  20. #imagen ul li img #foto{
  21. 	border:10px solid yellow;
  22. 	width:300px;
  23. 	height:200px;
  24. 	list-style-type:none;
  25. 	border-radius:15px;
  26. }
  27.  
  28.  
  30. <script type="text/javascript" src="js/jquery.js"></script>
  32.  
  33. $(document).ready(function(){
  34.  
  35. 	var img =$('#link ul li').attr('dir');
  36. 	$('#imagen ul li img').attr('src',img);
  37. 	$('#imagen ul li img').css({
  38. 			'position':'absolute',
  39. 			'width':'400px',
  40. 			'height':'300px',
  41. 			'margin-left':'-40px',
  42. 			'margin-top':'-18px'
  43.  
  44. 		});
  45.  
  46. 	$('#link ul li').mouseover(function(){
  47.  
  48. 		var img = $(this).attr('dir');
  49. 		$('#imagen ul li img').attr('src',img);
  50. 		$('#imagen ul li img').css({
  51. 			'width':'400px',
  52. 			'height':'300px'
  53. 		});
  54. 	});
  55.  
  56. });
  57.  
  59. </head>
  61.  
  62. <div id="marco">
  63.  
  64. 	<div id="link">
  65. 		<ul>
  66. 			<li dir="http://blogs.peru21.pe/huevinenlaoficina/gato-pollo.jpg">hola</li>
  67.  
  68. 			<li dir="http://2.bp.blogspot.com/_jt2ErO_S1CY/TK9pX6F91dI/AAAAAAAAAHM/jB0sANA8kAU/s1600/bsd-windows-linux.jpg">ruta</li>
  69.  
  70. 			<li dir="http://t0.gstatic.com/images?q=tbn:ANd9GcQwP4o37X2gmTIlC9wx2QkWWTt7Qf5Z0HgsuaB8kw5-ECeketjMDsU8ryDY">imagen 3</li>
  71.  
  72. 			<li dir="http://blogs.peru21.pe/huevinenlaoficina/gato-pollo.jpg">hola</li>
  73.  
  74. 			<li dir="http://2.bp.blogspot.com/_jt2ErO_S1CY/TK9pX6F91dI/AAAAAAAAAHM/jB0sANA8kAU/s1600/bsd-windows-linux.jpg">ruta</li>
  75.  
  76. 			<li dir="http://t0.gstatic.com/images?q=tbn:ANd9GcQwP4o37X2gmTIlC9wx2QkWWTt7Qf5Z0HgsuaB8kw5-ECeketjMDsU8ryDY">imagen 3</li>
  77.  
  78. 		</ul>
  79. 	</div>
  80.  
  81. 	<div id="imagen">
  82. 		<ul>
  83. 			<li><img id="foto"/>imagen1</li>
  84. 		</ul>
  85. 	</div>
  86.  
  87. </div>
  88. </body>
  89. </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,809 Ú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,168 Último mensaje 12 Marzo 2012, 06:15 am
por 4rkn63l
Consulta simple AJAX con jQuery
Desarrollo Web 		Xephiro 1 2,914 Último mensaje 26 Julio 2012, 10:45 am
por sexto
Simple ejecucion en java o jquery
PHP 		sQs 4 1,852 Último mensaje 15 Julio 2013, 18:36 pm
por sQs
Como quitar un efecto de jquery
Desarrollo Web 		:ohk<any> 1 2,469 Último mensaje 21 Marzo 2016, 15:26 pm
por MinusFour
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines