¿Cómo funcionará?
Vamos a estar utilizando una secuencia de imágenes prerenderizadas, mostrando un objeto 3D que gira alrededor de su eje y. La secuencia contiene 180 imágenes para mostrar una animación suave como sea posible. El usuario puede "rotar el objeto' arrastrando el ratón horizontalmente, o pasar sus dedos por el regulador de imagen en una pantalla táctil.¿Cómo lo haremos?
Primero nos crearemos nuestro código HTML, agregaremos algunos CSS personalizado, incluyendo consultas de medios de comunicación, luego haremos groovy con JavaScript. Para hacer más emocionante no sólo nos hará trabajar en equipos de escritorio, sino también de iPhones y iPads debido a que la aplicación funciona muy bien con eventos de toque.
Antes de empezar, permítanme decir un masivo gracias a Mateusz Sypien y Maya Prodanova para sus obras de arte de 360 increíble!
1. Carpetas
En la carpeta de proyecto tenemos una carpeta css , una carpeta js y una carpeta de img . La carpeta css contiene el archivo reset.css , la carpeta de img contiene la secuencia de imágenes y la carpeta js contiene las bibliotecas de Heartcode CanvasLoader y jQuery.
2. Nuevo proyecto
Crear un nuevo archivo HTML y guardarlo en el directorio raíz del proyecto como index.html. En la establecemos la ventanilla para dispositivos móviles haciendo nuestro contenido no - escalable. Incluyen dos archivos CSS: Eric Meyer reset.css y el threesixty.css, que contendrá nuestros estilos personalizados.- Ver código fuente
- Copiar código
- DOCTYPE html >
- < HTML Lang="en">
- <Jefe>
- < meta conjunto de caracteres="utf-8">
- < meta nombre="ventanilla" contenido="escala inicial = 1.0, máxima escala = 1.0" />
<a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Ftitle.html" target="_top"><span class="kw2"></span></a></span>360<span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Ftitle.html" target="_top"><span class="kw2">título</span></a>></span></font></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Flink.html" target="_top"> <span class="kw2">enlace</span> </a> </font><font lang="es"><span class="kw3">rel</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"stylesheet"</span> </font><font lang="es"><span class="kw3">href</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"css/reset.css"</span> </font><font lang="es"><span class="kw3">medios de comunicación</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"pantalla"</span> </font><font lang="es"><span class="kw3">tipo</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"text/css"</span></font></font> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Flink.html" target="_top"> <span class="kw2">enlace</span> </a> </font><font lang="es"><span class="kw3">rel</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"stylesheet"</span> </font><font lang="es"><span class="kw3">href</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"css/threesixty.css"</span> </font><font lang="es"><span class="kw3">medios de comunicación</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"pantalla"</span> </font><font lang="es"><span class="kw3">tipo</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"text/css"</span></font></font> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fhead.html" target="_top"><span lang="es" class="kw2">Jefe</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fbody.html" target="_top"><span lang="es" class="kw2">cuerpo</span></a>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fbody.html" target="_top"><span lang="es" class="kw2">cuerpo</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fhtml.html" target="_top"><span lang="es" class="kw2">HTML</span></a>></span></div></li></ol></div></div><h2 lang="es">3. Porcentaje de carga de</h2><p><font lang="es">Crear un contenedor <strong><div></strong> para el control deslizante. </font><font lang="es">Contiene un <strong><ol></strong>, que celebrará la secuencia de imágenes como s <strong><li></strong>y también posee el preloader <strong><div></strong> sosteniendo un <strong><span></strong> para la carga Mostrar porcentaje. </font><font lang="es">Agregaremos las imágenes dinámicamente mediante JavaScript.</font></p><div class="geshifilter"><ul id="src-btn-list-container-1" class="src-btn-list"><li id="view-code-1" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-1" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 19px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_2" data-original-id="ZeroClipboardMovie_2" /></div></ul><div class="html4strict geshifilter-html4strict"><ol><li class="li1"><div class="de1"><span class="sc0"><font><!</font><font lang="es">DOCTYPE html ></font></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fhtml.html" target="_top"> <span class="kw2">HTML</span> </a> </font><font lang="es"><span class="kw3">Lang</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"en"</span></font></font>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fhead.html" target="_top"><span lang="es" class="kw2">Jefe</span></a>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fmeta.html" target="_top"> <span class="kw2">meta</span> </a> </font><font lang="es"><span class="kw3">conjunto de caracteres</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"utf-8"</span></font></font>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fmeta.html" target="_top"> <span class="kw2">meta</span> </a> </font><font lang="es"><span class="kw3">nombre</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"ventanilla"</span> </font><font lang="es"><span class="kw3">contenido</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"escala inicial = 1.0, máxima escala = 1.0"</span></font></font> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1"> <font lang="es"><span class="sc2"><title><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Ftitle.html" target="_top"><span class="kw2"></span></a></span>360<span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Ftitle.html" target="_top"><span class="kw2">título</span></a>></span></font></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Flink.html" target="_top"> <span class="kw2">enlace</span> </a> </font><font lang="es"><span class="kw3">rel</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"stylesheet"</span> </font><font lang="es"><span class="kw3">href</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"css/reset.css"</span> </font><font lang="es"><span class="kw3">medios de comunicación</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"pantalla"</span> </font><font lang="es"><span class="kw3">tipo</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"text/css"</span></font></font> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Flink.html" target="_top"> <span class="kw2">enlace</span> </a> </font><font lang="es"><span class="kw3">rel</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"stylesheet"</span> </font><font lang="es"><span class="kw3">href</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"css/threesixty.css"</span> </font><font lang="es"><span class="kw3">medios de comunicación</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"pantalla"</span> </font><font lang="es"><span class="kw3">tipo</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"text/css"</span></font></font> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fhead.html" target="_top"><span lang="es" class="kw2">Jefe</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fbody.html" target="_top"><span lang="es" class="kw2">cuerpo</span></a>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fdiv.html" target="_top"> <span class="kw2">div</span> </a> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"threesixty"</span></font>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fdiv.html" target="_top"> <span class="kw2">div</span> </a> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"spinner"</span></font>></span></div></li><li class="li1"><div class="de1"> <font lang="es"><span class="sc2"><span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fspan.html" target="_top"><span class="kw2"></span></a></span>0%<span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fspan.html" target="_top"><span class="kw2">span</span></a>></span></font></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fdiv.html" target="_top"><span lang="es" class="kw2">div</span></a>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fol.html" target="_top"> <span class="kw2">ol</span> </a> </font><font lang="es"><span class="kw3">ID.</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"threesixty_images"</span>><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fol.html" target="_top"><span class="kw2">ol</span> </a></font></font>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fdiv.html" target="_top"><span lang="es" class="kw2">div</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fbody.html" target="_top"><span lang="es" class="kw2">cuerpo</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fhtml.html" target="_top"><span lang="es" class="kw2">HTML</span></a>></span></div></li></ol></div></div><h2 lang="es">4. Agregar interacción</h2><p><font lang="es">Justo antes de <strong>la/</body></strong>, incluir los archivos JS que usaremos. </font><font lang="es">jQuery nos ayuda a agregar interacción rápidamente, la Heartcode CanvasLoader agregar una animación suave de preloader. </font><font lang="es">El archivo <strong>threesixty.js</strong> contiene el código JavaScript que controla el regulador de la imagen.</font></p><div class="geshifilter"><ul id="src-btn-list-container-2" class="src-btn-list"><li id="view-code-2" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-2" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 19px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_3" data-original-id="ZeroClipboardMovie_3" /></div></ul><div class="html4strict geshifilter-html4strict"><ol><li class="li1"><div class="de1"><span class="sc0"><font><!</font><font lang="es">DOCTYPE html ></font></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fhtml.html" target="_top"> <span class="kw2">HTML</span> </a> </font><font lang="es"><span class="kw3">Lang</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"en"</span></font></font>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fhead.html" target="_top"><span lang="es" class="kw2">Jefe</span></a>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fmeta.html" target="_top"> <span class="kw2">meta</span> </a> </font><font lang="es"><span class="kw3">conjunto de caracteres</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"utf-8"</span></font></font>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fmeta.html" target="_top"> <span class="kw2">meta</span> </a> </font><font lang="es"><span class="kw3">nombre</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"ventanilla"</span> </font><font lang="es"><span class="kw3">contenido</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"escala inicial = 1.0, máxima escala = 1.0"</span></font></font> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1"> <font lang="es"><span class="sc2"><title><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Ftitle.html" target="_top"><span class="kw2"></span></a></span>360<span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Ftitle.html" target="_top"><span class="kw2">título</span></a>></span></font></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Flink.html" target="_top"> <span class="kw2">enlace</span> </a> </font><font lang="es"><span class="kw3">rel</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"stylesheet"</span> </font><font lang="es"><span class="kw3">href</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"css/reset.css"</span> </font><font lang="es"><span class="kw3">medios de comunicación</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"pantalla"</span> </font><font lang="es"><span class="kw3">tipo</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"text/css"</span></font></font> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Flink.html" target="_top"> <span class="kw2">enlace</span> </a> </font><font lang="es"><span class="kw3">rel</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"stylesheet"</span> </font><font lang="es"><span class="kw3">href</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"css/threesixty.css"</span> </font><font lang="es"><span class="kw3">medios de comunicación</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"pantalla"</span> </font><font lang="es"><span class="kw3">tipo</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"text/css"</span></font></font> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fhead.html" target="_top"><span lang="es" class="kw2">Jefe</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fbody.html" target="_top"><span lang="es" class="kw2">cuerpo</span></a>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fdiv.html" target="_top"> <span class="kw2">div</span> </a> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"threesixty"</span></font>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fdiv.html" target="_top"> <span class="kw2">div</span> </a> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"spinner"</span></font>></span></div></li><li class="li1"><div class="de1"> <font lang="es"><span class="sc2"><span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fspan.html" target="_top"><span class="kw2"></span></a></span>0%<span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fspan.html" target="_top"><span class="kw2">span</span></a>></span></font></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fdiv.html" target="_top"><span lang="es" class="kw2">div</span></a>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fol.html" target="_top"> <span class="kw2">ol</span> </a> </font><font lang="es"><span class="kw3">ID.</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"threesixty_images"</span>><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fol.html" target="_top"><span class="kw2">ol</span> </a></font></font>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fdiv.html" target="_top"><span lang="es" class="kw2">div</span></a>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fscript.html" target="_top"> <span class="kw2">secuencia de comandos</span> </a> </font><font lang="es"><span class="kw3">src</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"js/heartcode-canvasloader-min.js"</span>><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fscript.html" target="_top"><span class="kw2">script</span> </a></font></font>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fscript.html" target="_top"> <span class="kw2">secuencia de comandos</span> </a> </font><font lang="es"><span class="kw3">src</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"js/jquery-1.7.min.js"</span>><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fscript.html" target="_top"><span class="kw2">script</span> </a></font></font>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<font><font lang="es"><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fscript.html" target="_top"> <span class="kw2">secuencia de comandos</span> </a> </font><font lang="es"><span class="kw3">src</span></font><font><span class="sy0">=</span></font><font lang="es"><span class="st0">"js/threesixty.js"</span>><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fscript.html" target="_top"><span class="kw2">script</span> </a></font></font>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fbody.html" target="_top"><span lang="es" class="kw2">cuerpo</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://www.microsofttranslator.com/bv.aspx?from=&to=es&a=http%3A%2F%2Fdecember.com%2Fhtml%2F4%2Felement%2Fhtml.html" target="_top"><span lang="es" class="kw2">HTML</span></a>></span></div></li></ol></div></div><h2 lang="es">5. El estilo</h2><p><font lang="es">Ahora cree el archivo <strong>threesixty.css</strong> . </font><font lang="es">El archivo <strong>reset.css</strong> establece todos los comportamientos predeterminados, por lo que nos podemos pasar a la diversión bits. </font><font lang="es">Estilo del contenedor de <strong>#threesixty</strong> primero. </font><font lang="es">El regulador de imagen por defecto será 960px por 540px, centrado horizontal y verticalmente. </font><font lang="es">También establecemos el elemento <strong><ol></strong> se oculta.</font></p><div class="geshifilter"><ul id="src-btn-list-container-3" class="src-btn-list"><li id="view-code-3" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-3" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 18px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_4" data-original-id="ZeroClipboardMovie_4" /></div></ul><div class="css geshifilter-css"><ol><li class="li1"><div class="de1"><span lang="es" class="re0">#threesixty</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">posición</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="kw2">absoluta</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">desbordamiento</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="kw2">oculto</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">Arriba</span><span class="sy0">:</span><span class="re3">50%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">izquierda</span><span class="sy0">:</span><span class="re3">50%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">ancho</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">960px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">altura</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">540px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen izquierda</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">-480px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen superior</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">-270px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span lang="es" class="re0"># threesixty_images</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">Mostrar</span></font><font><span class="sy0">:</span> </font><font lang="es"><span class="kw2">ninguno</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></div></div><h2 lang="es">6. Configurar la pantalla</h2><p><font lang="es">Para que la interfaz funcione en pantallas diferentes manteniendo proporciones consistente, vamos a controlar la visualización mediante consultas de medios de comunicación. </font><font lang="es">Se puede ver en el fragmento de código por encima de cómo definimos nuestra resolución diferente y criterios de dispositivo de orientación mediante las propiedades de <strong>anchura de dispositivo de máxima</strong> y <strong>orientación</strong> combinadas con el operador <strong>y</strong> . </font><font lang="es">El fragmento de código anterior establece la visualización para iPad (1024px amplia) y pantallas táctiles de iPhone y iPod, tanto en los modos horizontal y vertical (480px amplia). </font><font lang="es">Las imágenes se ocupan todo el espacio disponible dentro del contenedor.</font></p><div class="geshifilter"><ul id="src-btn-list-container-4" class="src-btn-list"><li id="view-code-4" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-4" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 19px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_5" data-original-id="ZeroClipboardMovie_5" /></div></ul><div class="css geshifilter-css"><ol><li class="li1"><div class="de1"><span lang="es" class="co1">@ media screen y (anchura máxima-dispositivo: 1024px) y {(orientación: vertical)</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="re0">#threesixty</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">ancho</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">720px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">altura</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">450px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen izquierda</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">-360px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen superior</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">-225px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span lang="es" class="co1">@ media screen y (anchura máxima-dispositivo: 480px) y (orientación: paisaje),</span></div></li><li class="li1"><div class="de1"><font lang="es"> pantalla y <span class="br0">(</span>)-webkit-min-dispositivo-píxeles-ratio<span class="sy0">:</span> <span class="nu0">2</span><span class="br0">)</span> y <span class="br0">(</span>)<span class="sy0">:</span>la orientación<span class="kw2">horizontal</span></font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="re0">#threesixty</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">ancho</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">360px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">altura</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">225px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen izquierda</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">-180px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen superior</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">-113px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span lang="es" class="co1">@ media screen y (anchura máxima-dispositivo: 480px) y (orientación: retrato),</span></div></li><li class="li1"><div class="de1"><font lang="es"> pantalla y <span class="br0">(</span>)-webkit-min-dispositivo-píxeles-ratio<span class="sy0">:</span> <span class="nu0">2</span><span class="br0">)</span> y <span class="br0">(</span>)<span class="sy0">:</span>la orientación<span class="kw2">vertical</span></font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="re0">#threesixty</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">ancho</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">320px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">altura</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">200px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen izquierda</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">-160px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen superior</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">-100px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></div></div><h2 lang="es">7. Imágenes</h2><p><font lang="es">Todas las imágenes se colocarán en el <strong><ol></strong>. </font><font lang="es">Primero establece el estilo de cada imagen en el contenedor. </font><font lang="es">No queremos que las imágenes a todos sean visibles, por lo que definimos la <strong>imagen actual</strong> y las clases de <strong>imagen anterior</strong> que controlan su visibilidad. </font><font lang="es">Nos podrá intercambiar entre estos Estados con JavaScript.</font></p><div class="geshifilter"><ul id="src-btn-list-container-5" class="src-btn-list"><li id="view-code-5" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-5" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 18px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_6" data-original-id="ZeroClipboardMovie_6" /></div></ul><div class="css geshifilter-css"><ol><li class="li1"><div class="de1"><font lang="es">img <span class="re0">#threesixty</span> </font><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">posición</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="kw2">absoluta</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">Arriba</span><span class="sy0">:</span><span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">Ancho</span><span class="sy0">:</span><span class="re3">100%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">altura</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="kw2">auto</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span lang="es" class="re1">imagen .current</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">visibilidad</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="kw2">visible</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">Ancho</span><span class="sy0">:</span><span class="re3">100%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span lang="es" class="re1">imagen de .previous</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">visibilidad</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="kw2">oculto</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">Ancho</span><span class="sy0">:</span><span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></div></div><h2 lang="es">8. Preloader estilo</h2><p><font lang="es">Estilo nuestro precargador haciendo <strong>#spinner</strong> oculta, establecer sus dimensiones y colocándolo en el centro del contenedor. </font><font lang="es">Nos también establecer los estilos de la envergadura dentro de la <strong>#spinner</strong> ser horizontal y verticalmente centrado en lo que el texto será en medio de la animación circular.</font></p><div class="geshifilter"><ul id="src-btn-list-container-6" class="src-btn-list"><li id="view-code-6" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-6" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 18px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_7" data-original-id="ZeroClipboardMovie_7" /></div></ul><div class="css geshifilter-css"><ol><li class="li1"><div class="de1"><span lang="es" class="re0">#Spinner</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">posición</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="kw2">absoluta</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">izquierda</span><span class="sy0">:</span><span class="re3">50%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">Arriba</span><span class="sy0">:</span><span class="re3">50%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">ancho</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">90px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">altura</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">90px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen izquierda</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">-45px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen superior</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">-50 px</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">Mostrar</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="kw2">ninguno</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><font lang="es"><span class="re0">#Spinner</span> span </font><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">posición</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="kw2">absoluta</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">Arriba</span><span class="sy0">:</span><span class="re3">50%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">Ancho</span><span class="sy0">:</span><span class="re3">100%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span lang="es" class="kw1">Color</span><span class="sy0">:</span><span class="re0">#333</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">fuente</span></font><font><span class="sy0">:</span></font><font lang="es">Verdana de <span class="re3">0.8em</span> arial<span class="sy0">,</span> <span class="sy0">,</span> sans</font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">alinear texto</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="kw2">Centro</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">altura de la línea</span></font><font><span class="sy0">:</span></font><font lang="es"><span class="re3">0.6em</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">margen superior</span></font><font><span class="re2">:-0</span></font><font lang="es"><span class="re3">.3em</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></div></div><h2 lang="es">9. Preparándose</h2><p><font lang="es">Crear un nuevo archivo JS y guárdelo como <strong>threesixty.js</strong> en la carpeta js. </font><font lang="es">Colocar el código en el jQuery función DOM-Ready, para que por el momento que el script comienza a ejecutarse, los elementos DOM ya están en el lugar. </font><font lang="es"><strong>listo</strong> permiten la interacción del usuario cuando nuestra aplicación esté listo.</font></p><p><font lang="es">Arrastrando nos indica si el usuario está utilizando el puntero. </font><font lang="es">Con speedMultiplier configuramos la velocidad de la imagen de deslizamiento; </font><font lang="es">Tenemos algunas variables para almacenar las posiciones de puntero: los temporizadores realizará el seguimiento de los cambios de puntero: y definimos algunas variables para realizar un seguimiento de los cálculos de fotograma y la carga de la imagen.</font></p><div class="geshifilter"><ul id="src-btn-list-container-7" class="src-btn-list"><li id="view-code-7" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-7" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 19px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_8" data-original-id="ZeroClipboardMovie_8" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1">$<span class="br0">(</span><font><font lang="es">documento<span class="br0">)</span>.</font><font lang="es"><span class="me1">listo</span></font><font lang="es"><span class="br0">(</span>)<span class="kw2">función</span></font></font> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font lang="es"><span class="kw2">var</span> <span class="sy0">=</span> listo <span class="kw2">falso</span></font><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> arrastrando <span class="kw2">false</span> <span class="sy0">=</span></font><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> pointerStartPosX </font><span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> pointerEndPosX </font><span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> pointerDistance </font><span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><font lang="es"> monitorStartTime </font><span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> monitorInt </font><span class="sy0">=</span> <span class="nu0">10</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> Ticker </font><span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> speedMultiplier </font><span class="sy0">=</span> <span class="nu0">10</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> Spinner</font><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><font lang="es"> totalFrames </font><span class="sy0">=</span> <span class="nu0">180</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> currentFrame </font><span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> marcos </font><span class="sy0">=</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> endFrame </font><span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"><font lang="es"> loadedImages </font><span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">10. Spinner</h2><p><font><font lang="es">Creamos la función <strong>addSpinner</strong> que agrega una instancia de <strong>CanvasLoader</strong> con una configuración personalizada dentro de la <strong>#spinner</strong>. </font><font lang="es">La spinner será un 90x90px, cargador en forma de espiral con una animación suave circular. </font><font lang="es">Llame a su método de mostrar y, a continuación, mostrar mediante el jQuery <strong>fadeIn</strong></font></font>.</p><div class="geshifilter"><ul id="src-btn-list-container-8" class="src-btn-list"><li id="view-code-8" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-8" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 19px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_9" data-original-id="ZeroClipboardMovie_9" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función</span> addSpinner </font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font lang="es"> Spinner <span class="sy0">=</span> <span class="kw2">nuevas</span> CanvasLoader<span class="br0">(</span>)<span class="st0">"spinner"</span></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Spinner.</font><font lang="es"><span class="me1">setShape</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"espiral"</span></font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Spinner.</font><font lang="es"><span class="me1">setDiameter</span></font></font><span class="br0">(</span><span class="nu0">90</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Spinner.</font><font lang="es"><span class="me1">setDensity</span></font></font><span class="br0">(</span><span class="nu0">90</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Spinner.</font><font lang="es"><span class="me1">setRange</span></font></font><span class="br0">(</span><span class="nu0">1</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Spinner.</font><font lang="es"><span class="me1">SETSPEED]</span></font></font><span class="br0">(</span><span class="nu0">4</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Spinner.</font><font lang="es"><span class="me1">setColor</span></font></font><span class="br0">(</span><span class="st0">"#333333"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Spinner.</font><font lang="es"><span class="me1">Mostrar</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> $<span class="br0">(</span><font><font lang="es"><span class="st0">"#spinner"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">fadeIn</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"lento"</span></font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">11. Matriz de carga y marcos de imagen</h2><p><font lang="es">La función de imagen de carga crea un <strong><li></strong> con un <strong><img></strong> dentro. </font><font lang="es">Ocultar la imagen con la clase de <strong>imagen anterior</strong> . </font><font lang="es">La variable <strong>loadedImages</strong> genera el nombre de la imagen, que se incrementa cada vez que se carga una nueva imagen; </font><font lang="es">Si tiene éxito, llamamos a la función <strong>imageLoaded</strong> .</font></p><p><font lang="es">En una sola línea de código nos crear un nuevo <strong><img></strong>, seleccione su origen al nombre del archivo generado y ocultar mediante la aplicación de la clase de <strong>imagen anterior</strong> . </font><font lang="es">Todo en una sola línea gracias a jQuery! </font><font lang="es">Almacenamos cada objeto imagen devuelta por jQuery del conjunto de marcos, que será útil a la hora de animación.</font></p><div class="geshifilter"><ul id="src-btn-list-container-9" class="src-btn-list"><li id="view-code-9" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-9" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 18px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_10" data-original-id="ZeroClipboardMovie_10" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función</span> loadImage</font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es">documento de li <span class="sy0">=</span> <span class="kw2">var</span> .</font><font lang="es"><span class="me1">createElement</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"li"</span></font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font lang="es"><span class="kw2">var</span> <span class="sy0">=</span> imageName <span class="st0">"img/threesixty_"</span> <span class="sy0">+</span> <span class="br0">(</span>loadedImages <span class="sy0">+</span> <span class="nu0">1</span><span class="br0">)</span> <span class="sy0">+</span> <span class="st0">".jpg"</span></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw2">var</span> <span class="sy0">=</span> $<span class="br0">(</span><span class="st0">'<img> '</span><span class="br0">)</span>de la imagen.</font><font lang="es"><span class="me1">attr</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">'src'</span><span class="sy0">,</span> imageName<span class="br0">)</span>.</font><font lang="es"><span class="me1">addClass</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"imagen anterior"</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">appendTo</span></font><font lang="es"><span class="br0">(</span>) li</font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> marcos.</font><font lang="es"><span class="me1">Push</span></font><font lang="es"><span class="br0">(</span>) imagen</font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> $<span class="br0">(</span><font><font lang="es"><span class="st0">"# threesixty_images"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">Anexar</span></font><font lang="es"><span class="br0">(</span>) li</font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> $<span class="br0">(</span><font><font lang="es">imagen<span class="br0">)</span>.</font><font lang="es"><span class="me1">cargar</span></font><font lang="es"><span class="br0">(</span>)<span class="kw2">función</span></font></font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font lang="es"> imageLoaded</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">12. Sobrecarga de imagen</h2><p><font lang="es">Hay demasiadas imágenes para cargar a la vez, por lo que llamamos recursivamente <strong>loadImage</strong> . </font><font lang="es">La imagen de proceso de carga se muestra escribiendo el texto de porcentaje en la <strong>#spinner <span></strong>. </font><font lang="es">Una vez que se cargan las imágenes, hacemos la primera imagen visible y ocultar el precargador.</font></p><div class="geshifilter"><ul id="src-btn-list-container-10" class="src-btn-list"><li id="view-code-10" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-10" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 18px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_11" data-original-id="ZeroClipboardMovie_11" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función</span> imageLoaded</font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font lang="es"> loadedImages</font><span class="sy0">++;</span></div></li><li class="li1"><div class="de1"> $<span class="br0">(</span><font><font lang="es"><span class="st0">"#spinner abarcan"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">texto</span></font><font lang="es"><span class="br0">(</span>Matemáticas.</font><font lang="es"><span class="me1">piso</span></font><font lang="es"><span class="br0">(</span>loadedImages <span class="sy0">/</span> totalFrames </font></font><span class="sy0">*</span> <span class="nu0">100</span><span class="br0">)</span> <span class="sy0">+</span> <span class="st0">"%"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">si</span> </font><font lang="es"><span class="br0">(</span>loadedImages <span class="sy0">==</span> totalFrames</font></font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Marcos<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>.</font><font lang="es"><span class="me1">removeClass</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"imagen anterior"</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">addClass</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"imagen actual"</span></font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> $<span class="br0">(</span><font><font lang="es"><span class="st0">"#spinner"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">aplicaciones</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"lento"</span><span class="sy0">,</span> <span class="kw2">función</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Spinner.</font><font lang="es"><span class="me1">Ocultar</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> showThreesixty</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span lang="es" class="kw1">otra cosa</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font lang="es"> loadImage</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">13. La transición</h2><p><font lang="es">Mostrar el control deslizante de imagen con una transición suave mediante la función <strong>showThreesixty</strong> . </font><font lang="es">Lanzamos la app llamando al <strong>addSpinner()</strong> y <strong>loadImage()</strong>. </font><font lang="es">Cuando la prueba, el precargador se desvanece, y cuando se cargan las imágenes, una transición lo oculta y muestra la primera imagen.</font></p><div class="geshifilter"><ul id="src-btn-list-container-11" class="src-btn-list"><li id="view-code-11" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-11" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 19px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_12" data-original-id="ZeroClipboardMovie_12" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función</span> imageLoaded</font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font lang="es"> loadedImages</font><span class="sy0">++;</span></div></li><li class="li1"><div class="de1"> $<span class="br0">(</span><font><font lang="es"><span class="st0">"#spinner abarcan"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">texto</span></font><font lang="es"><span class="br0">(</span>Matemáticas.</font><font lang="es"><span class="me1">piso</span></font><font lang="es"><span class="br0">(</span>loadedImages <span class="sy0">/</span> totalFrames </font></font><span class="sy0">*</span> <span class="nu0">100</span><span class="br0">)</span> <span class="sy0">+</span> <span class="st0">"%"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">si</span> </font><font lang="es"><span class="br0">(</span>loadedImages <span class="sy0">==</span> totalFrames</font></font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Marcos<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>.</font><font lang="es"><span class="me1">removeClass</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"imagen anterior"</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">addClass</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"imagen actual"</span></font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> $<span class="br0">(</span><font><font lang="es"><span class="st0">"#spinner"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">aplicaciones</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"lento"</span><span class="sy0">,</span> <span class="kw2">función</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Spinner.</font><font lang="es"><span class="me1">Ocultar</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> showThreesixty</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span lang="es" class="kw1">otra cosa</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font lang="es"> loadImage</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función</span> showThreesixty </font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> $<span class="br0">(</span><font><font lang="es"><span class="st0">"# threesixty_images"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">fadeIn</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"lento"</span></font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> listo <span class="sy0">=</span> <span class="kw2">es true</span></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><font lang="es">addSpinner</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es">loadImage</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">14. Los valores de fotograma</h2><p><font lang="es">La animación de control deslizante va a ser simple: nos interpolación el valor actual de marco a un conjunto final valor de fotograma y mostrar la imagen actual. </font><font lang="es">Un método de aceleración personalizada calcula la distancia entre los marcos y crea una animación suave girar en cualquier dirección.</font></p><p><font lang="es">Crear la función de procesamiento que actualiza las animaciones de cuadros. </font><font lang="es">Si el fotograma actual no alcanza el fotograma final, moverlo cerca cambiando su valor: cuando llega al fotograma final, detener el procesamiento. </font><font lang="es">Actualizar las imágenes con las funciones <strong>hidePreviousFrame</strong> y <strong>showCurrentFrame</strong> .</font></p><div class="geshifilter"><ul id="src-btn-list-container-12" class="src-btn-list"><li id="view-code-12" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-12" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 19px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_13" data-original-id="ZeroClipboardMovie_13" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función de</span> procesamiento </font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">si</span></font><font lang="es"><span class="br0">(</span>currentFrame <span class="sy0">!==</span> endFrame</font></font><span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw2">var</span> <span class="sy0">=</span> frameEasing endFrame <span class="sy0"><</span> currentFrame <span class="sy0">?</span> </font><font lang="es">Matemáticas.</font><font lang="es"><span class="me1">piso</span></font><font lang="es"><span class="br0">(</span>)<span class="br0">(</span>) endFrame <span class="sy0">-</span> currentFrame<span class="br0">)</span> <span class="sy0">*</span> <span class="nu0">0.1</span><span class="br0">)</span> </font><font><span class="sy0">:</span> </font><font lang="es">Matemáticas.</font><font lang="es"><span class="me1">ceil</span></font><font lang="es"><span class="br0">(</span>)<span class="br0">(</span>) endFrame <span class="sy0">-</span> currentFrame</font></font><span class="br0">)</span> <span class="sy0">*</span> <span class="nu0">0.1</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> hidePreviousFrame</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> currentFrame <span class="sy0">+=</span> frameEasing</font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> showCurrentFrame</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span lang="es" class="kw1">otra cosa</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> ventana.</font><font lang="es"><span class="me1">clearInterval</span></font><font lang="es"><span class="br0">(</span>) ticker</font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> Ticker </font><span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">15. Ticker</h2><p><font lang="es">La función de actualización llama nuestra función de procesamiento, que crea un <strong>setInterval</strong> que almacenamos en la variable de teletipo. </font><font lang="es">Para asegurarse de que no hacemos ningún llamadas no deseadas, compruebe si ya se está ejecutando el ticker. </font><font lang="es">Establecer el valor FPS a 60, para que podamos tener una animación suave, agradable.</font></p><div class="geshifilter"><ul id="src-btn-list-container-13" class="src-btn-list"><li id="view-code-13" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-13" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 18px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_14" data-original-id="ZeroClipboardMovie_14" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función de</span> actualización </font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">si</span> </font><font lang="es"><span class="br0">(</span>) ticker </font></font><span class="sy0">===</span> <span class="nu0">0</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Ticker <span class="sy0">=</span> auto.</font><font lang="es"><span class="me1">setInterval</span></font><font lang="es"><span class="br0">(</span>) procesamiento<span class="sy0">,</span> matemáticas.</font><font lang="es"><span class="me1">ronda</span></font></font><span class="br0">(</span><span class="nu0">1000</span> <span class="sy0">/</span> <span class="nu0">60</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span> </div></li></ol></div></div><h2 lang="es">16. Normalizado valor</h2><p><font lang="es">los Estados de la imagen actual de intercambio de <strong>hidePreviousFrame</strong> y <strong>showCurrentFrame</strong> . </font><font lang="es">Llame a <strong>getNormalizedCurrentFrame()</strong> para obtener el valor de fotograma entre 1-180, que devuelve el valor 'normalizado' <strong>currentFrame</strong> que utilizamos para manipular la imagen actual.</font></p><p><font lang="es"> Para obtener un efecto de 'swooshy' el actual valor de fotograma no entran en el intervalo definido por <strong>totalFrames</strong>. </font><font lang="es">Con los comandos de función <strong>getNormalizedCurrentFrame</strong> , podemos calcular los valores dentro del intervalo de <strong>totalFrames</strong> por lo que la animación se mueve con precisión.</font></p><div class="geshifilter"><ul id="src-btn-list-container-14" class="src-btn-list"><li id="view-code-14" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-14" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 18px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_15" data-original-id="ZeroClipboardMovie_15" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función</span> hidePreviousFrame</font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Marcos<span class="br0">[</span>getNormalizedCurrentFrame<span class="br0">(</span><span class="br0">)</span><span class="br0">]</span>.</font><font lang="es"><span class="me1">removeClass</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"imagen de la corriente"</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">addClass</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"imagen anterior"</span></font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función</span> showCurrentFrame</font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> Marcos<span class="br0">[</span>getNormalizedCurrentFrame<span class="br0">(</span><span class="br0">)</span><span class="br0">]</span>.</font><font lang="es"><span class="me1">removeClass</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"imagen anterior"</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">addClass</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"imagen actual"</span></font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función</span> getNormalizedCurrentFrame</font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es">c <span class="kw2">var</span> <span class="sy0">=</span> <span class="sy0">-</span>matemáticas.</font><font lang="es"><span class="me1">ceil</span></font><font lang="es"><span class="br0">(</span>) currentFrame <span class="sy0">%</span> totalFrames</font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">si</span> </font><font lang="es"><span class="br0">(</span>c <span class="sy0"><</span> <span class="nu0">0</span><span class="br0">)</span> c <span class="sy0">+=</span> <span class="br0">(</span>) totalFrames </font></font><span class="sy0">-</span> <span class="nu0">1</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font lang="es">c <span class="kw1">volver</span></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">17. Pruebas</h2><p><font lang="es">Vamos a darle una prueba rápida. </font><font lang="es">En la función <strong>showThreesixty</strong> vamos a agregar dos cosas: en primer lugar configuramos el endFrame a-720, y en segundo lugar, llamamos al método refresh. </font><font lang="es">Si se prueba la aplicación, verá las imágenes rápidamente una alrededor de como está desvaneciendo.</font></p><div class="geshifilter"><ul id="src-btn-list-container-15" class="src-btn-list"><li id="view-code-15" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-15" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 18px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_16" data-original-id="ZeroClipboardMovie_16" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1"><font lang="es"><span class="kw2">función</span> showThreesixty </font><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> $<span class="br0">(</span><font><font lang="es"><span class="st0">"# threesixty_images"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">fadeIn</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"lento"</span></font></font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> listo <span class="sy0">=</span> <span class="kw2">es true</span></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> endFrame </font><span class="sy0">=</span> <span class="sy0">-</span><span class="nu0">720</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> actualizar</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">18. Interacción del usuario</h2><p><font><font lang="es">Agregar la interacción con el usuario. </font><font lang="es">Comience con los detectores de eventos del mouse y, a continuación, agregar la función personalizada <strong>getPointerEvent</strong>, que nos indica si el usuario utiliza un mouse o el dedo. </font><font lang="es">El ratón hacia abajo, guardamos la posición del puntero x y el movimiento del ratón que llamamos <strong>trackPointer()</strong></font></font>.</p><div class="geshifilter"><ul id="src-btn-list-container-16" class="src-btn-list"><li id="view-code-16" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-16" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 18px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_17" data-original-id="ZeroClipboardMovie_17" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1"><font lang="es">evento de <span class="kw2">función</span> getPointerEvent<span class="br0">(</span>)</font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es">evento de <span class="kw1">volver</span> .</font><font lang="es"><span class="me1">originalEvent</span>.</font><font lang="es"><span class="me1">targetTouches</span> </font><font><span class="sy0">?</span> </font><font lang="es">evento.</font><font lang="es"><span class="me1">originalEvent</span>.</font><font lang="es"><span class="me1">targetTouches</span></font><font><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> </font><font lang="es">evento de <span class="sy0">:</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">$<span class="br0">(</span><font><font lang="es"><span class="st0">"#threesixty"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">MouseDown</span></font><font lang="es"><span class="br0">(</span>)<span class="kw2">función</span> <span class="br0">(</span>eventos</font></font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> evento.</font><font lang="es"><span class="me1">preventDefault</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> evento pointerStartPosX <span class="sy0">=</span> de getPointerEvent<span class="br0">(</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">pageX</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> arrastrar <span class="kw2">cierto</span> <span class="sy0">=</span></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">$<span class="br0">(</span><font><font lang="es">documento<span class="br0">)</span>.</font><font lang="es"><span class="me1">MouseUp</span></font><font lang="es"><span class="br0">(</span>)<span class="kw2">función</span> <span class="br0">(</span>eventos</font></font><span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> evento.</font><font lang="es"><span class="me1">preventDefault</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> arrastrando <span class="kw2">false</span> <span class="sy0">=</span></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">$<span class="br0">(</span><font><font lang="es">documento<span class="br0">)</span>.</font><font lang="es"><span class="me1">MouseMove</span></font><font lang="es"><span class="br0">(</span>)<span class="kw2">función</span> <span class="br0">(</span>eventos</font></font><span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> evento.</font><font lang="es"><span class="me1">preventDefault</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> evento de trackPointer<span class="br0">(</span>)</font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">19. Touch eventos</h2><p><font lang="es">Ahora agregue los eventos de toque. </font><font lang="es">Usamos el <strong>getPointerEvent()</strong> para pasar el evento correcto a la función <strong>trackPointer</strong> . </font><font lang="es">Para todos los eventos, nos evitar el defaultbehaviour y establecer el valor de arrastre <strong>es true</strong> si el usuario está arrastrando el puntero y <strong>falso</strong> para cuando liberan.</font></p><div class="geshifilter"><ul id="src-btn-list-container-17" class="src-btn-list"><li id="view-code-17" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-17" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 19px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_18" data-original-id="ZeroClipboardMovie_18" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1">$<span class="br0">(</span><font><font lang="es"><span class="st0">"#threesixty"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">vivir</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"touchstart"</span><span class="sy0">,</span> <span class="kw2">función</span> <span class="br0">(</span>eventos</font></font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> evento.</font><font lang="es"><span class="me1">preventDefault</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> evento pointerStartPosX <span class="sy0">=</span> de getPointerEvent<span class="br0">(</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">pageX</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> arrastrar <span class="kw2">cierto</span> <span class="sy0">=</span></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">$<span class="br0">(</span><font><font lang="es"><span class="st0">"#threesixty"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">vivir</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"touchmove"</span><span class="sy0">,</span> <span class="kw2">función</span> <span class="br0">(</span>eventos</font></font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> evento.</font><font lang="es"><span class="me1">preventDefault</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> evento de trackPointer<span class="br0">(</span>)</font><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">$<span class="br0">(</span><font><font lang="es"><span class="st0">"#threesixty"</span></font><font><span class="br0">)</span>.</font><font lang="es"><span class="me1">vivir</span></font><font lang="es"><span class="br0">(</span>)<span class="st0">"touchend"</span><span class="sy0">,</span> <span class="kw2">función</span> <span class="br0">(</span>eventos</font></font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> evento.</font><font lang="es"><span class="me1">preventDefault</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> arrastrando <span class="kw2">false</span> <span class="sy0">=</span></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">20. El seguimiento movimiento</h2><p><font lang="es">En <strong>trackPointer()</strong> realizamos un seguimiento del movimiento del puntero periódicamente para hacer la frameanimation flujo con el puntero arrastrando. </font><font lang="es">Como puede ver, sólo seguimos el puntero si arrastra es true y la aplicación está preparada. </font><font lang="es">Hacemos esto porque la representación puede ser bastante CPU intensa y tenemos que ser inteligentes con el procesamiento.</font></p><p><font lang="es">Almacenar el inicio y el final x posiciones de puntero y, a continuación, comprobar la distancia entre ellos dentro de los períodos de tiempo. </font><font lang="es">Con <strong>pointerDistance</strong>, calcular la animación <strong>endFrame</strong> y actualización mediante una llamada a la función de actualización. </font><font lang="es"><strong>speedMultiplier</strong> nos ofrece un control total sobre la velocidad de giro.</font></p><div class="geshifilter"><ul id="src-btn-list-container-18" class="src-btn-list"><li id="view-code-18" lang="es" class="view-code">Ver código fuente</li><li id="copy-code-18" lang="es" class="copy-code">Copiar código</li><div style="left: 0px; top: 19px; width: 604px; height: 15px; position: absolute; z-index: 99;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 15px; width: 604px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="ZeroClipboardMovie_19" data-original-id="ZeroClipboardMovie_19" /></div></ul><div class="javascript geshifilter-javascript"><ol><li class="li1"><div class="de1"><font lang="es">evento de <span class="kw2">función</span> trackPointer<span class="br0">(</span>)</font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">si</span> </font><font lang="es"><span class="br0">(</span>) listo <span class="sy0">& &</span> arrastrando</font></font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> evento pointerEndPosX <span class="sy0">=</span> de getPointerEvent<span class="br0">(</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">pageX</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <font><font lang="es"><span class="kw1">si</span></font><font lang="es"><span class="br0">(</span>monitorStartTime <span class="sy0"><</span> <span class="kw2">Nueva</span> fecha<span class="br0">(</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">getTime</span></font><font lang="es"><span class="br0">(</span><span class="br0">)</span> <span class="sy0">-</span> monitorInt</font></font><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"><font lang="es"> pointerDistance <span class="sy0">=</span> pointerEndPosX <span class="sy0">-</span> pointerStartPosX</font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> currentFrame endFrame <span class="sy0">=</span> <span class="sy0">+</span> matemáticas.</font><font lang="es"><span class="me1">ceil</span></font><font lang="es"><span class="br0">(</span>)<span class="br0">(</span>totalFrames <span class="sy0">-</span> <span class="nu0">1</span><span class="br0">)</span> <span class="sy0">*</span> speedMultiplier <span class="sy0">*</span> <span class="br0">(</span>pointerDistance <span class="sy0">/</span> $<span class="br0">(</span>)<span class="st0">"#threesixty"</span><span class="br0">)</span>.</font><span class="me1"><font></font><font lang="es">ancho</font></span><font></font></font><span class="br0">(</span><span class="br0">)</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font lang="es"> actualizar</font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> monitorStartTime <span class="sy0">=</span> <span class="kw2">Nueva</span> fecha<span class="br0">(</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">getTime</span></font></font><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><font><font lang="es"> evento pointerStartPosX <span class="sy0">=</span> de getPointerEvent<span class="br0">(</span><span class="br0">)</span>.</font><font lang="es"><span class="me1">pageX</span></font></font><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li></ol></div></div><h2 lang="es">21. Nosotros estamos hechos!</h2><p><font lang="es">Si se prueba la aplicación puede ver la animación de cargador de porcentaje dentro y fuera, apareciendo entonces las imágenes que se muestran con el giro de 'swooshy'. </font><font lang="es">Ahora puede utilizar el regulador de la imagen con el ratón o con un toque en dispositivos móviles, para hacer el control deslizante de 360 imagen girar con una animación suave, sensible.</font></p><figure style="width: 615px;" class="captioned-image"><img style="width: 595px; height: 277px;" alt="" src="http://media.netmagazine.futurecdn.net/files/images/2012/3/360ImageSliderTutorial_Final.png"></figure><p><font style="color: rgb(15, 15, 95); background-color: rgb(240, 240, 160);" lang="es">La mejor manera de probar la aplicación en dispositivos móviles es colocar los archivos de proyecto en un servidor, o compartir tu localhost con el dispositivo. </font><font lang="es">También puede ver cómo diferentes resoluciones de pantalla de dispositivo y orientaciones son manejados con consultas de medios de comunicación.</font></p><p><em lang="es">He decidido hacer este regulador de código abierto y creado un <a href="https://github.com/heartcode/360-Image-Slider" rel="nofollow" target="_top">repositorio git</a> para permitir que otros colaborar y ayudar a hacer impresionante</em></p></div></div><p></p><p><font color="#0000ff"><title>360</título></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> < enlace rel="stylesheet" href="css/reset.css" medios de comunicación="pantalla" tipo="text/css" /></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> < enlace rel="stylesheet" href="css/threesixty.css" medios de comunicación="pantalla" tipo="text/css" /></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"></Jefe></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"><cuerpo></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">12.</font></p><p><font color="#0000ff"></cuerpo></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff"></HTML></font></p><p><br></p><p> </p><p><b>3. Porcentaje de carga de</b></p><p> </p><p>Crear un contenedor <div> para el control deslizante. Contiene un <ol>, que celebrará la secuencia de imágenes como s <li>y también posee el preloader <div> sosteniendo un <span> para la carga Mostrar porcentaje. Agregaremos las imágenes dinámicamente mediante JavaScript.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff"><!DOCTYPE html ></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff">< HTML Lang="en"></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"><Jefe></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> < meta conjunto de caracteres="utf-8"></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> < meta nombre="ventanilla" contenido="escala inicial = 1.0, máxima escala = 1.0" /></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> <title>360</título></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> < enlace rel="stylesheet" href="css/reset.css" medios de comunicación="pantalla" tipo="text/css" /></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> < enlace rel="stylesheet" href="css/threesixty.css" medios de comunicación="pantalla" tipo="text/css" /></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"></Jefe></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"><cuerpo></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> < div id="threesixty"></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> < div id="spinner"></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff"> <span>0%</span></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 14.</font></p><p><font color="#0000ff"> </div></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 15.</font></p><p><font color="#0000ff"> < ol ID.="threesixty_images"></ol ></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 16.</font></p><p><font color="#0000ff"> </div></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 17.</font></p><p><font color="#0000ff"></cuerpo></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 18.</font></p><p><font color="#0000ff"></HTML></font></p><p><br></p><p> </p><p>4. Agregar interacción</p><p> </p><p>Justo antes de la/</body>, incluir los archivos JS que usaremos. jQuery nos ayuda a agregar interacción rápidamente, la Heartcode CanvasLoader agregar una animación suave de preloader. El archivo threesixty.js contiene el código JavaScript que controla el regulador de la imagen.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><br></p><p><br></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff"><!DOCTYPE html ></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff">< HTML Lang="en"></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"><Jefe></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> < meta conjunto de caracteres="utf-8"></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> < meta nombre="ventanilla" contenido="escala inicial = 1.0, máxima escala = 1.0" /></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> <title>360</título></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> < enlace rel="stylesheet" href="css/reset.css" medios de comunicación="pantalla" tipo="text/css" /></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> < enlace rel="stylesheet" href="css/threesixty.css" medios de comunicación="pantalla" tipo="text/css" /></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"></Jefe></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"><cuerpo></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> < div id="threesixty"></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> < div id="spinner"></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff"> <span>0%</span></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 14.</font></p><p><font color="#0000ff"> </div></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 15.</font></p><p><font color="#0000ff"> < ol ID.="threesixty_images"></ol ></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 16.</font></p><p><font color="#0000ff"> </div></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 17.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">18.</font></p><p><font color="#0000ff"> < secuencia de comandos src="js/heartcode-canvasloader-min.js"></script ></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 19.</font></p><p><font color="#0000ff"> < secuencia de comandos src="js/jquery-1.7.min.js"></script ></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 20.</font></p><p><font color="#0000ff"> < secuencia de comandos src="js/threesixty.js"></script ></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 21.</font></p><p><font color="#0000ff"></cuerpo></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 22.</font></p><p><font color="#0000ff"></HTML></font></p><p><br></p><p> </p><p>5. El estilo</p><p> </p><p>Ahora cree el archivo threesixty.css . El archivo reset.css establece todos los comportamientos predeterminados, por lo que nos podemos pasar a la diversión bits. Estilo del contenedor de #threesixty primero. El regulador de imagen por defecto será 960px por 540px, centrado horizontal y verticalmente. También establecemos el elemento <ol> se oculta.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">#threesixty {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> posición:absoluta;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> desbordamiento:oculto;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> Arriba:50%;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> izquierda:50%;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> ancho:960px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> altura:540px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> margen izquierda:-480px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> margen superior:-270px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff">}</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"># threesixty_images {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> Mostrar: ninguno;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff">}</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff">6. Configurar la pantalla</font></p><p> </p><p>Para que la interfaz funcione en pantallas diferentes manteniendo proporciones consistente, vamos a controlar la visualización mediante consultas de medios de comunicación. Se puede ver en el fragmento de código por encima de cómo definimos nuestra resolución diferente y criterios de dispositivo de orientación mediante las propiedades de anchura de dispositivo de máxima y orientación combinadas con el operador y . El fragmento de código anterior establece la visualización para iPad (1024px amplia) y pantallas táctiles de iPhone y iPod, tanto en los modos horizontal y vertical (480px amplia). Las imágenes se ocupan todo el espacio disponible dentro del contenedor.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><br></p><p><br></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">@ media screen y (anchura máxima-dispositivo: 1024px) y {(orientación: vertical)</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> #threesixty {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> ancho:720px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> altura:450px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> margen izquierda:-360px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> margen superior:-225px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> }</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff">}</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff">@ media screen y (anchura máxima-dispositivo: 480px) y (orientación: paisaje),</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"> pantalla y ()-webkit-min-dispositivo-píxeles-ratio: 2) y ():la orientaciónhorizontal) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> #threesixty {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> ancho:360px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff"> altura:225px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 14.</font></p><p><font color="#0000ff"> margen izquierda:-180px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 15.</font></p><p><font color="#0000ff"> margen superior:-113px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 16.</font></p><p><font color="#0000ff"> }</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 17.</font></p><p><font color="#0000ff">}</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 18.</font></p><p><font color="#0000ff">@ media screen y (anchura máxima-dispositivo: 480px) y (orientación: retrato),</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 19.</font></p><p><font color="#0000ff"> pantalla y ()-webkit-min-dispositivo-píxeles-ratio: 2) y ():la orientaciónvertical) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 20.</font></p><p><font color="#0000ff"> #threesixty {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 21.</font></p><p><font color="#0000ff"> ancho:320px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 22.</font></p><p><font color="#0000ff"> altura:200px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 23.</font></p><p><font color="#0000ff"> margen izquierda:-160px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 24.</font></p><p><font color="#0000ff"> margen superior:-100px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 25.</font></p><p><font color="#0000ff"> }</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 26.</font></p><p><font color="#0000ff">}</font></p><p><br></p><p> </p><p>7. Imágenes</p><p> </p><p>Todas las imágenes se colocarán en el <ol>. Primero establece el estilo de cada imagen en el contenedor. No queremos que las imágenes a todos sean visibles, por lo que definimos la imagen actual y las clases de imagen anterior que controlan su visibilidad. Nos podrá intercambiar entre estos Estados con JavaScript.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">img #threesixty {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> posición:absoluta;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> Arriba:0;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> Ancho:100%;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> altura:auto;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff">}</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff">imagen .current {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> visibilidad:visible;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> Ancho:100%;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff">}</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff">imagen de .previous {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> visibilidad:oculto;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff"> Ancho:0;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 14.</font></p><p><font color="#0000ff">}</font></p><p><br></p><p> </p><p>8. Preloader estilo</p><p> </p><p>Estilo nuestro precargador haciendo #spinner oculta, establecer sus dimensiones y colocándolo en el centro del contenedor. Nos también establecer los estilos de la envergadura dentro de la #spinner ser horizontal y verticalmente centrado en lo que el texto será en medio de la animación circular.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">#Spinner {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> posición:absoluta;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> izquierda:50%;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> Arriba:50%;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> ancho:90px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> altura:90px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> margen izquierda:-45px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> margen superior:-50 px;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> Mostrar:ninguno;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff">}</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff">#Spinner span {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> posición:absoluta;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff"> Arriba:50%;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 14.</font></p><p><font color="#0000ff"> Ancho:100%;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 15.</font></p><p><font color="#0000ff"> Color:#333;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 16.</font></p><p><font color="#0000ff"> fuente:Verdana de 0.8em arial, , sans;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 17.</font></p><p><font color="#0000ff"> alinear texto:Centro;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 18.</font></p><p><font color="#0000ff"> altura de la línea:0.6em;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 19.</font></p><p><font color="#0000ff"> margen superior:-0.3em;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 20.</font></p><p><font color="#0000ff">}</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> </font></p><p>9. Preparándose</p><p> </p><p>Crear un nuevo archivo JS y guárdelo como threesixty.js en la carpeta js. Colocar el código en el jQuery función DOM-Ready, para que por el momento que el script comienza a ejecutarse, los elementos DOM ya están en el lugar. listo permiten la interacción del usuario cuando nuestra aplicación esté listo.</p><p> </p><p>Arrastrando nos indica si el usuario está utilizando el puntero. Con speedMultiplier configuramos la velocidad de la imagen de deslizamiento; Tenemos algunas variables para almacenar las posiciones de puntero: los temporizadores realizará el seguimiento de los cambios de puntero: y definimos algunas variables para realizar un seguimiento de los cálculos de fotograma y la carga de la imagen.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">$(documento).listo()función () {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> var = listo falso,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> arrastrando false =,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> pointerStartPosX = 0,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> pointerEndPosX = 0,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> pointerDistance = 0,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> monitorStartTime = 0,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> monitorInt = 10,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"> Ticker = 0,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> speedMultiplier = 10,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> Spinner,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">14.</font></p><p><font color="#0000ff"> totalFrames = 180,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 15.</font></p><p><font color="#0000ff"> currentFrame = 0,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 16.</font></p><p><font color="#0000ff"> marcos = [],</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 17.</font></p><p><font color="#0000ff"> endFrame = 0,</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 18.</font></p><p><font color="#0000ff"> loadedImages = 0;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 19.</font></p><p><font color="#0000ff">});</font></p><p><br></p><p> </p><p>10. Spinner</p><p> </p><p>Creamos la función addSpinner que agrega una instancia de CanvasLoader con una configuración personalizada dentro de la #spinner. La spinner será un 90x90px, cargador en forma de espiral con una animación suave circular. Llame a su método de mostrar y, a continuación, mostrar mediante el jQuery fadeIn.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">función addSpinner () {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> Spinner = nuevas CanvasLoader()"spinner");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> Spinner.setShape()"espiral");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> Spinner.setDiameter(90);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> Spinner.setDensity(90);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> Spinner.setRange(1);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> Spinner.SETSPEED](4);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> Spinner.setColor("#333333");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> Spinner.Mostrar();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"> $("#spinner").fadeIn()"lento");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff">};</font></p><p><br></p><p> </p><p>11. Matriz de carga y marcos de imagen</p><p> </p><p>La función de imagen de carga crea un <li> con un <img> dentro. Ocultar la imagen con la clase de imagen anterior . La variable loadedImages genera el nombre de la imagen, que se incrementa cada vez que se carga una nueva imagen; Si tiene éxito, llamamos a la función imageLoaded .</p><p> </p><p>En una sola línea de código nos crear un nuevo <img>, seleccione su origen al nombre del archivo generado y ocultar mediante la aplicación de la clase de imagen anterior . Todo en una sola línea gracias a jQuery! Almacenamos cada objeto imagen devuelta por jQuery del conjunto de marcos, que será útil a la hora de animación.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">función loadImage() {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> documento de li = var .createElement()"li");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> var = imageName "img/threesixty_" + (loadedImages + 1) + ".jpg";</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> var = $('<img> ')de la imagen.attr()'src', imageName).addClass()"imagen anterior").appendTo() li);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> marcos.Push() imagen);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> $("# threesixty_images").Anexar() li);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> $(imagen).cargar()función() {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> imageLoaded();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> });</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff">};</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> </font></p><p>12. Sobrecarga de imagen</p><p> </p><p>Hay demasiadas imágenes para cargar a la vez, por lo que llamamos recursivamente loadImage . La imagen de proceso de carga se muestra escribiendo el texto de porcentaje en la #spinner <span>. Una vez que se cargan las imágenes, hacemos la primera imagen visible y ocultar el precargador.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">función imageLoaded() {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> loadedImages++;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> $("#spinner abarcan").texto(Matemáticas.piso(loadedImages / totalFrames * 100) + "%");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> si (loadedImages == totalFrames) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> Marcos[0].removeClass()"imagen anterior").addClass()"imagen actual");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> $("#spinner").aplicaciones()"lento", función(){</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> Spinner.Ocultar();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> showThreesixty();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> });</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"> } otra cosa {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> loadImage();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> }</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff">};</font></p><p><br></p><p> </p><p>13. La transición</p><p> </p><p>Mostrar el control deslizante de imagen con una transición suave mediante la función showThreesixty . Lanzamos la app llamando al addSpinner() y loadImage(). Cuando la prueba, el precargador se desvanece, y cuando se cargan las imágenes, una transición lo oculta y muestra la primera imagen.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">función imageLoaded() {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> loadedImages++;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> $("#spinner abarcan").texto(Matemáticas.piso(loadedImages / totalFrames * 100) + "%");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> si (loadedImages == totalFrames) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> Marcos[0].removeClass()"imagen anterior").addClass()"imagen actual");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> $("#spinner").aplicaciones()"lento", función(){</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> Spinner.Ocultar();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> showThreesixty();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> });</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"> } otra cosa {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> loadImage();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> }</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff">};</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 14.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 15.</font></p><p><font color="#0000ff">función showThreesixty () {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 16.</font></p><p><font color="#0000ff"> $("# threesixty_images").fadeIn()"lento");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 17.</font></p><p><font color="#0000ff"> listo = es true;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 18.</font></p><p><font color="#0000ff">};</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 19.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 20.</font></p><p><font color="#0000ff">addSpinner();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 21.</font></p><p><font color="#0000ff">loadImage();</font></p><p><br></p><p> </p><p>14. Los valores de fotograma</p><p> </p><p>La animación de control deslizante va a ser simple: nos interpolación el valor actual de marco a un conjunto final valor de fotograma y mostrar la imagen actual. Un método de aceleración personalizada calcula la distancia entre los marcos y crea una animación suave girar en cualquier dirección.</p><p> </p><p>Crear la función de procesamiento que actualiza las animaciones de cuadros. Si el fotograma actual no alcanza el fotograma final, moverlo cerca cambiando su valor: cuando llega al fotograma final, detener el procesamiento. Actualizar las imágenes con las funciones hidePreviousFrame y showCurrentFrame .</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">función de procesamiento () {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> si(currentFrame !== endFrame)</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> { </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">4.</font></p><p><font color="#0000ff"> var = frameEasing endFrame < currentFrame ? Matemáticas.piso()() endFrame - currentFrame) * 0.1) : Matemáticas.ceil()() endFrame - currentFrame) * 0.1);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> hidePreviousFrame();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> currentFrame += frameEasing;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> showCurrentFrame();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> } otra cosa {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> ventana.clearInterval() ticker);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"> Ticker = 0;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> }</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff">};</font></p><p><br></p><p> </p><p>15. Ticker</p><p> </p><p>La función de actualización llama nuestra función de procesamiento, que crea un setInterval que almacenamos en la variable de teletipo. Para asegurarse de que no hacemos ningún llamadas no deseadas, compruebe si ya se está ejecutando el ticker. Establecer el valor FPS a 60, para que podamos tener una animación suave, agradable.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">función de actualización () {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> si () ticker === 0) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> Ticker = auto.setInterval() procesamiento, matemáticas.ronda(1000 / 60));</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> }</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff">}; </font></p><p><br></p><p><br></p><p>16. Normalizado valor</p><p> </p><p>los Estados de la imagen actual de intercambio de hidePreviousFrame y showCurrentFrame . Llame a getNormalizedCurrentFrame() para obtener el valor de fotograma entre 1-180, que devuelve el valor 'normalizado' currentFrame que utilizamos para manipular la imagen actual.</p><p> </p><p>Para obtener un efecto de 'swooshy' el actual valor de fotograma no entran en el intervalo definido por totalFrames. Con los comandos de función getNormalizedCurrentFrame , podemos calcular los valores dentro del intervalo de totalFrames por lo que la animación se mueve con precisión.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">función hidePreviousFrame() {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> Marcos[getNormalizedCurrentFrame()].removeClass()"imagen de la corriente").addClass()"imagen anterior");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff">};</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff">función showCurrentFrame() {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> Marcos[getNormalizedCurrentFrame()].removeClass()"imagen anterior").addClass()"imagen actual");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff">};</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff">función getNormalizedCurrentFrame() {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"> c var = -matemáticas.ceil() currentFrame % totalFrames);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> si (c < 0) c += () totalFrames - 1);</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> c volver;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff">};</font></p><p><br></p><p> </p><p>17. Pruebas</p><p> </p><p>Vamos a darle una prueba rápida. En la función showThreesixty vamos a agregar dos cosas: en primer lugar configuramos el endFrame a-720, y en segundo lugar, llamamos al método refresh. Si se prueba la aplicación, verá las imágenes rápidamente una alrededor de como está desvaneciendo.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">función showThreesixty () {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> $("# threesixty_images").fadeIn()"lento");</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> listo = es true;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> endFrame = -720;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> actualizar();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff">};</font></p><p><br></p><p> </p><p>18. Interacción del usuario</p><p> </p><p>Agregar la interacción con el usuario. Comience con los detectores de eventos del mouse y, a continuación, agregar la función personalizada getPointerEvent, que nos indica si el usuario utiliza un mouse o el dedo. El ratón hacia abajo, guardamos la posición del puntero x y el movimiento del ratón que llamamos trackPointer().</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">evento de función getPointerEvent()) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> evento de volver .originalEvent.targetTouches ? evento.originalEvent.targetTouches[0] evento de :;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff">};</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff">$("#threesixty").MouseDown()función (eventos) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> evento.preventDefault();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> evento pointerStartPosX = de getPointerEvent().pageX;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> arrastrar cierto =;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff">});</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff">$(documento).MouseUp()función (eventos){</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff"> evento.preventDefault();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff"> arrastrando false =;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 14.</font></p><p><font color="#0000ff">});</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 15.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 16.</font></p><p><font color="#0000ff">$(documento).MouseMove()función (eventos){</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 17.</font></p><p><font color="#0000ff"> evento.preventDefault();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 18.</font></p><p><font color="#0000ff"> evento de trackPointer());</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 19.</font></p><p><font color="#0000ff">});</font></p><p><br></p><p> </p><p>19. Touch eventos</p><p> </p><p>Ahora agregue los eventos de toque. Usamos el getPointerEvent() para pasar el evento correcto a la función trackPointer . Para todos los eventos, nos evitar el defaultbehaviour y establecer el valor de arrastre es true si el usuario está arrastrando el puntero y falso para cuando liberan.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">$("#threesixty").vivir()"touchstart", función (eventos) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> evento.preventDefault();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> evento pointerStartPosX = de getPointerEvent().pageX;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> arrastrar cierto =;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff">});</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff">$("#threesixty").vivir()"touchmove", función (eventos) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> evento.preventDefault();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> evento de trackPointer());</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff">});</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> </font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff">$("#threesixty").vivir()"touchend", función (eventos) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 13.</font></p><p><font color="#0000ff"> evento.preventDefault();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 14.</font></p><p><font color="#0000ff"> arrastrando false =;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 15.</font></p><p><font color="#0000ff">});</font></p><p><br></p><p> </p><p>20. El seguimiento movimiento</p><p> </p><p>En trackPointer() realizamos un seguimiento del movimiento del puntero periódicamente para hacer la frameanimation flujo con el puntero arrastrando. Como puede ver, sólo seguimos el puntero si arrastra es true y la aplicación está preparada. Hacemos esto porque la representación puede ser bastante CPU intensa y tenemos que ser inteligentes con el procesamiento.</p><p> </p><p>Almacenar el inicio y el final x posiciones de puntero y, a continuación, comprobar la distancia entre ellos dentro de los períodos de tiempo. Con pointerDistance, calcular la animación endFrame y actualización mediante una llamada a la función de actualización. speedMultiplier nos ofrece un control total sobre la velocidad de giro.</p><p> </p><p>Ver código fuente</p><p>Copiar código</p><p><br></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff">1.</font></p><p><font color="#0000ff">evento de función trackPointer()) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 2.</font></p><p><font color="#0000ff"> si () listo & & arrastrando) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 3.</font></p><p><font color="#0000ff"> evento pointerEndPosX = de getPointerEvent().pageX;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 4.</font></p><p><font color="#0000ff"> si(monitorStartTime < Nueva fecha().getTime() - monitorInt) {</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 5.</font></p><p><font color="#0000ff"> pointerDistance = pointerEndPosX - pointerStartPosX;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 6.</font></p><p><font color="#0000ff"> currentFrame endFrame = + matemáticas.ceil()(totalFrames - 1) * speedMultiplier * (pointerDistance / $()"#threesixty").ancho()));</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 7.</font></p><p><font color="#0000ff"> actualizar();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 8.</font></p><p><font color="#0000ff"> monitorStartTime = Nueva fecha().getTime();</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 9.</font></p><p><font color="#0000ff"> evento pointerStartPosX = de getPointerEvent().pageX;</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 10.</font></p><p><font color="#0000ff"> }</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 11.</font></p><p><font color="#0000ff"> }</font></p><p><font color="#0000ff"><br></font></p><p><font color="#0000ff"> 12.</font></p><p><font color="#0000ff">};</font></p><p><br></p><p> </p><p>21. Nosotros estamos hechos!</p><p> </p><p>Si se prueba la aplicación puede ver la animación de cargador de porcentaje dentro y fuera, apareciendo entonces las imágenes que se muestran con el giro de 'swooshy'. Ahora puede utilizar el regulador de la imagen con el ratón o con un toque en dispositivos móviles, para hacer el control deslizante de 360 imagen girar con una animación suave, sensible.</p><p> </p><p>La mejor manera de probar la aplicación en dispositivos móviles es colocar los archivos de proyecto en un servidor, o compartir tu localhost con el dispositivo. También puede ver cómo diferentes resoluciones de pantalla de dispositivo y orientaciones son manejados con consultas de medios de comunicación.</p><p> </p><p>He decidido hacer este regulador de código abierto y creado un repositorio git para permitir que otros colaborar y ayudar a hacer impresionante.</p><div><br></div><p></p>
0 comentarios:
Publicar un comentario