mozilla

Revision 190061 of DHTML Demostraciones del uso de DOM/Style

  • Enlace amigable (slug) de la revisión: DHTML_Demostraciones_del_uso_de_DOM//Style
  • Título de la revisión: DHTML Demostraciones del uso de DOM/Style
  • Id de la revisión: 190061
  • Creada:
  • Creador: Superruzafa
  • ¿Es la revisión actual? No
  • Comentario Repaso del artículo. Quito plantilla traducción.

Contenido de la revisión

Proyecto de ejemplos DOM Mozilla

Esta página contiene una lista de ejemplos DOM basados en sus diversas características. La lista incluye demostraciones para eventos DOM, DOM Core, DOM HTML y mucho más.

Animación y manipulación de elementos de texto

Animación 3D en tiempo real

Esta demostración muestra cómo usar JavaScript y DOM para animar un conjunto de imágenes para crear un efecto de animación 3D.

Demostraciones DOM (Requiere navegador que interprete DOM 1 y 2)

Estilo DOM: Recortar y posicionar elementos con la interfaz JavaScript DOM

Esta demostración está optimizada para funcionar con Mozilla porque usa imágenes PNG con canal alpha. Demuestra el uso de interfaces DOM para establecer el valor de las propiedades de posición y recorte de los elementos DIV.

Eventos DOM 1 y DOM 2: Arrastrar y redimensionar un elemento usando DOM

Esta muestra requiere un navegador compatible con eventos DOM 1 y DOM 2. Ha sido probado con Netscape 7.x/Mozilla.

DOM 1 y DOM 2: Manipulando dinámicamente una tabla de elementos

Esta demo requiere un navegador que soporte la especificación DOM 1 y DOM 2, como Netscape 7.x o Mozilla. Usa los eventos DOM 2 del ratón para proporcionar un interfaz que puede manipular dinámicamente los elementos de la tabla.

Controles multiplataforma

Windowing API: La ventana DHTML de BrainJar

BrainJar's DHTML Windows es un control (widget) que muestra cómo añadir ventanas DHTML dinámicas en una aplicación DHTML.

Stock Ticker

Stock Ticker proporciona un objeto reutilizable que puede adaptarse para monitorizar (mediante una línea en movimiento) valores financieros en cualquier navegador que soporte el estándar DOM.

Recursos adicionales para aprender DOM

Cruzando una tabla HTML con JavaScript e Interfaces DOM

Una visión general sobre los métodos DOM de nivel 1 y de cómo usarlos mediante JavaScript. Estas notas técnicas cubren los métodos del núcleo, que son los que permiten la creación y manipulación dinámica de los elementos de marcado mediante JavaScript.

DOM Central

Aprenda más acerca de W3C DOM.

Visita GetElementById.com

GetElementById.com contiene scripts DHTML y tutoriales que emplean W3C DOM. Descubre la demo Zoom Intro y otras magníficas demostraciones y scripts DOM.

La categoría W3C DOM en DMOZ.ORG

Esta categoría contiene notas técnicas, tutoriales y otros muchos recursos relacionados con JavaScript y W3C DOM.

{{ wiki.languages( { "en": "en/DHTML" } ) }}

Fuente de la revisión

<p>
</p><p><b>Proyecto de ejemplos DOM Mozilla</b>
</p><p><a class="external" href="http://cgi.din.or.jp/%7Ehagi3/JavaScript/Mozilla/SampleList.cgi?fmt=html">Esta página</a> contiene una lista de ejemplos DOM basados en sus diversas características. La lista incluye demostraciones para eventos DOM, DOM Core, DOM HTML y mucho más.
</p><p><b> Animación y manipulación de elementos de texto </b>
</p>
<ul><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/colorfades.html">Atenuación de colores</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/textinterlace.html">Text Interlace Effect</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/fadespacing.html">Atenuación y espaciado</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/bouncingsmile.html">Texto animado 1</a> - <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/geckowave.html">y 2</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/credits.html">Demo de títulos de crédito</a> (requiere Netscape 7.x/Mozilla)
</li></ul>
<p><b> Animación 3D en tiempo real </b>
</p><p><a class="external" href="http://www.world-direct.com/mozilla/dhtml/funo/3dcube/index.htm">Esta demostración</a> muestra cómo usar JavaScript y DOM para animar un conjunto de imágenes para crear un efecto de animación 3D.
</p>
<h3 name="Demostraciones_DOM_.28Requiere_navegador_que_interprete_DOM_1_y_2.29"> Demostraciones DOM (Requiere navegador que interprete DOM 1 y 2) </h3>
<p><b> Estilo DOM: Recortar y posicionar elementos con la interfaz JavaScript DOM </b>
</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/can/index.html">Esta demostración</a> está optimizada para funcionar con Mozilla porque usa imágenes PNG con canal alpha. Demuestra el uso de interfaces DOM para establecer el valor de las propiedades de posición y recorte de los elementos DIV.
</p><p><b> Eventos DOM 1 y DOM 2: Arrastrar y redimensionar un elemento usando DOM </b>
</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/resize/index.html">Esta muestra</a> requiere un navegador compatible con eventos DOM 1 y DOM 2. Ha sido probado con Netscape 7.x/Mozilla.
</p><p><b> DOM 1 y DOM 2: Manipulando dinámicamente una tabla de elementos </b>
</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/dynatable-light/index.html">Esta demo</a> requiere un navegador que soporte la especificación DOM 1 y DOM 2, como Netscape 7.x o Mozilla. Usa los eventos DOM 2 del ratón para proporcionar un interfaz que puede manipular dinámicamente los elementos de la tabla.
</p>
<h3 name="Controles_multiplataforma"> Controles multiplataforma </h3>
<p><b>Windowing API: La ventana DHTML de BrainJar </b>
</p><p><a class="external" href="http://www.brainjar.com/dhtml/windows/demo.html">BrainJar's DHTML Windows</a> es un control (<i>widget</i>) que muestra cómo añadir ventanas DHTML dinámicas en una aplicación DHTML.
</p><p><b> Stock Ticker </b>
</p><p><a class="external" href="http://developer.mozilla.org/en/docs/DHTML_Demonstrations_Using_DOM/Style:Stock_Ticker">Stock Ticker</a> proporciona un objeto reutilizable que puede adaptarse para monitorizar (mediante una línea en movimiento) valores financieros en cualquier navegador que soporte el estándar DOM.
<br>
</p>
<h3 name="Recursos_adicionales_para_aprender_DOM"> Recursos adicionales para aprender DOM </h3>
<p><b> Cruzando una tabla HTML con JavaScript e Interfaces DOM </b>
</p><p><a class="external" href="http://www.mozilla.org/docs/dom/technote/tn-dom-table/">Una visión</a> general sobre los métodos DOM de nivel 1 y de cómo usarlos mediante JavaScript. Estas notas técnicas cubren los métodos del núcleo, que son los que permiten la creación y manipulación dinámica de los elementos de marcado mediante JavaScript.
</p><p><b> DOM Central </b>
</p><p>Aprenda más acerca de <a href="es/DOM">W3C DOM</a>.
</p><p><b> Visita GetElementById.com </b>
</p><p><a class="external" href="http://getelementbyid.com/">GetElementById.com</a> contiene scripts DHTML y tutoriales que emplean W3C DOM. Descubre la  <a class="external" href="http://getelementbyid.com/scripts/index.aspx?CodeID=28">demo Zoom Intro</a> y otras magníficas demostraciones y scripts DOM.
</p><p><b> La categoría W3C DOM en DMOZ.ORG </b>
</p><p><a class="external" href="http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/">Esta categoría</a> contiene notas técnicas, tutoriales y otros muchos recursos relacionados con JavaScript y W3C DOM.
</p>{{ wiki.languages( { "en": "en/DHTML" } ) }}
Revertir a esta revisión