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

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  javascript - Imagen fade in
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: javascript - Imagen fade in  (Leído 1,645 veces)
TickTack


Desconectado Desconectado

Mensajes: 434


CipherX


Ver Perfil
javascript - Imagen fade in
« en: 19 Febrero 2019, 15:32 pm »

Hola a todos,

aqui podran ustedes dejar que una imagen de su elección se "haga grande"; e. s.: al
comienzo la imagen no es visible en sus páginas principales, pero crece dentro de
poco tiempo hacia el tamaño configurado.

En este javascript pueden configurar tres parametros: la anchura, la altura y la URL
de la imagen. Cuando la imagen se haya cargado en sus páginas principales, se hace
grande y se queda en sus páginas principales en el tamaño configurado.

Deje un imagen gif en el ejemplo.

Codigo:

Código:
<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de javascript</title>
  <meta charset="UTF-8">
</head>
<body>
<!-- Presentado por javascripts-gratis.de -->
<script type='text/javascript'>
<!--
// Script by Freddus
// visit my site: http://www.friederklein.de

/////////////////////
var altura = 60;    // Configurar aqui la altura original de la imagen
var anchura = 468;  // Configurar aqui la anchura original de la imagen
var imagensita = "https://media.giphy.com/media/l41lLf17l7YCZ4Tjq/giphy.gif";  // Dirección hacia la imagen
/////////////////////
var contador=0;

function emboque(){
  var pixels;
  document.getElementById("miimagenzoom").height = document.getElementById("miimagenzoom").height+altura/20;
  document.getElementById("miimagenzoom").width = document.getElementById("miimagenzoom").width+anchura/20
  if (contador<20){
    setTimeout("emboque()",50);
  }// Fin del if
  contador++;
}//Fin del emboque

function initimagen() {
document.write('<div align="center">');
document.write('<img height="0" width="0" id="miimagenzoom" src="'+imagensita+'" onload="emboque();">');
document.write('</div>');
}
//-->
</script>
<script type="text/javascript">initimagen();</script>
<!-- Presentado por javascripts-gratis.de -->

</body>
</html>

Página web: https://drive.google.com/open?id=1xbHiakrS5S76b8X_gtd22BIdVA2AFzCp

Autor: Freddus

Saludos


En línea

srWhiteSkull


Desconectado Desconectado

Mensajes: 444



Ver Perfil WWW
Re: javascript - Imagen fade in
« Respuesta #1 en: 19 Febrero 2019, 19:45 pm »

Código
  1. <!DOCTYPE html>
  2.  <title>Ejemplo de animación en CSS</title>
  3.  <meta charset="UTF-8">
  4.  <style>
  5.    .zoom {
  6.        display: block;
  7.        height: 60px;
  8.        width:  468px;
  9.        margin-left: auto;
  10.        margin-right: auto;
  11.        animation-name: zoom;
  12.        animation-duration:5s;
  13.    }
  14.  
  15.    @keyframes zoom {  
  16.        0% {
  17.            height: 0px;
  18.            width:  0px;
  19.        }
  20.  
  21.        100% {
  22.            height: 60px;
  23.            width:  468px;            
  24.        }
  25.    }
  26.  </style>
  27. </head>
  28.    <div>
  29.        <img class="zoom" src="https://media.giphy.com/media/l41lLf17l7YCZ4Tjq/giphy.gif">
  30.    </div>
  31. </body>
  32. </html>


« Última modificación: 19 Febrero 2019, 19:47 pm por srWhiteSkull » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
formulario / subir archivo / icono imagen html/php/javascript
Desarrollo Web
Neibar 5 7,720 Último mensaje 4 Mayo 2012, 22:08 pm
por Neibar
Proyecto con Fade [AYUDA]
Electrónica
apmino 0 2,415 Último mensaje 30 Septiembre 2012, 18:43 pm
por apmino
fullscreeen imagen javascript. Problemas con firefox
Desarrollo Web
OssoH 0 1,563 Último mensaje 31 Marzo 2014, 18:38 pm
por OssoH
Ayuda en programcion fade intensidad de luz
Programación C/C++
davigolia 6 2,542 Último mensaje 28 Enero 2016, 23:34 pm
por davigolia
Enviar imagen a servidor externo javascript
Programación General
OssoH 2 2,191 Último mensaje 24 Febrero 2017, 15:48 pm
por OssoH
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines