ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » jQuery

Imagen interactiva con jQuery

kino — Wed, 15 Jun 2011 18:21:53 +0000

Un interesante efecto que nos puede servir para… para… bueno ya se les ocurrirá como usarlo jeje…

Bueno el efecto hace lo siguiente, sobre una imagen base coloca marcadores (en este caso botones con el signo +)

imagen interactiva con jQuery

Y posteriormente, dos cosas:

Al pasar el mouse por el botón despliega un campo de texto

Al dar clic, nos muestra una segunda imagen:

Checa como hacerlo y el demo aquí

Tomado de: http://net.tutsplus.com/

Efecto jQuery para página de inicio

miguelortega — Fri, 15 Apr 2011 02:41:06 +0000

A veces me sorprende los efectos que se pueden lograr con librerias como jQuery me considero un derarrollador experto pero admito que nunca dejo de aprender nuevas cosas y sobre todo efectos como estos.

Claro este esun efeto sencillo pero útil.

Ver Efecto jQuery

¿Cómo crear botones tipo twitter?

miguelortega — Wed, 01 Dec 2010 02:28:43 +0000

En este tutorial podrás ver como crear un botón estilo sign in de twitter en 5 minutos.

Primer paso: HTML

 

<div class="button_wrap">
    <a class="button_aLeft" id="button_aLeft"><span>Use your Twitter ID</span></a>
    <a class="button_bLeft slidebttn" id="button_bLeft">Sign <span>in</span></a>
</div>

<div class="button_wrap">
 
    <a class="button_aRight" id="button_aRight"><span>Use your Twitter ID</span></a>
    <a class="button_bRight slidebttn" id="button_bRight">Sign <span>in</span></a>
</div>

Segundo paso: CSS

 
.button_wrap{ position:relative; width:225px; height:36px; overflow:hidden; font-weight:bold; font-size:11px; margin:10px; }
.button_aLeft{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; right:0px; position:absolute; line-height:36px; text-align:left; }
.button_aLeft span{ z-index:200; padding-left:20px; color:#fff; }
.button_aRight{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; left:0px; position:absolute; line-height:36px; text-align:right; }
.button_aRight span{ z-index:200; padding-right:20px; color:#fff; }
 
.button_bLeft{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; right:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer; }
.button_bLeft span{ color:#008ddd; }
.button_bRight{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; left:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer; }
.button_bRight span{ color:#008ddd; }
 
.button_c{ background-color:#008ddd; color:#fff; text-transform:uppercase; }
.button_c span{ color:#093d6f; }

Tercer Paso: Libreria Javascript

 
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script>
 
	<script type="text/javascript">
		dojo.addOnLoad(function() {
			dojo.forEach(dojo.query('.button_wrap'),function(wrap) {
				var a = dojo.query('a',wrap)[0];
				var span = dojo.query('span',a)[0];
				var button = dojo.query('a',wrap)[1];
 
				dojo.anim(span,{ opacity:0 },1);
 
				dojo.connect(button,'onmouseenter',function() {
					dojo.addClass(button,'button_c');
					dojo.anim(a,{ width:200 });
					dojo.anim(span,{ opacity: 1 });
				});
				dojo.connect(button,'onmouseleave',function() {
					dojo.removeClass(button,'button_c');
					dojo.anim(a,{ width:70 });
					dojo.anim(span,{ opacity: 0 });
				});
			});
		});
	</script>

Ver demo | Descargar

ToolTips con jQuery Gratis

miguelortega — Fri, 19 Nov 2010 19:55:42 +0000

TipTup es un plugin jquery muy liviano que muestra tips en links o donde se quiera mostrar una ayuda al pasar el mouse, no utiliza imágenes por lo tanto es más ligero que cualquier otro script .

Descargar en: drewwilson

Menú CSS con efecto de burbuja

miguelortega — Tue, 16 Nov 2010 23:35:29 +0000

Este es un tutorial para crear un menú burbuja con jQuery

Ir al Tutorial: tympanus

¿Cómo hacer un lector de feeds con JQuery?

miguelortega — Thu, 21 Oct 2010 20:09:22 +0000

Completísimo tutorial que nos explica cómo realizar un lector de feeds usando jQuery Mobile.

Cuyas características son las siguientes:

Mostrar lista de feeds con sus logos
Mostrar el feed cuando se hace click
Crear los estilos para los artículos
Crear un icono Apple-touch para que el usuario pueda añadir la aplicación a su teléfono
Usar YQL para obtener los datos del feed
Caché básico

Ver Ejemplo
Descargar Ejemplo
Ver Tutorial Completo