Código de JavaScript - Construir un Grid con JScript y CSS con efectos

Imágen de perfil

Construir un Grid con JScript y CSS con efectosgráfica de visualizaciones


JavaScript

Actualizado el 11 de Marzo del 2017 por ScriptShow (Publicado el 26 de Febrero del 2017)
1.957 visualizaciones desde el 26 de Febrero del 2017. Una media de 28 por semana
Como construir un Grid con JavaScript y CSS con efectos de giro, cambio de color y de forma al clicar en los cuadrados, que han sido creados virtualmente por un bucle con JScript.

Un experimento que puede ser adaptado para diversos propósitos.


Un saludo

Requerimientos

Un navegador web o dispositivo compatible.

1.0

Actualizado el 23 de Mayo del 2017 (Publicado el 26 de Febrero del 2017)gráfica de visualizaciones de la versión: 1.0
1.958 visualizaciones desde el 26 de Febrero del 2017. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

grid
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
body {
color:#FFFFFF;
background:#000000;
}
a {
width:200px;
height:200px;
margin:16px;
border-radius:2%;
background:#D4D4D4;
display:inline-block;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
}
a:focus {
-webkit-transform:rotateZ(180deg);
-moz-transform:rotateZ(180deg);
-ms-transform:rotateZ(180deg);
-o-transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
background:#4D4D4D;
border-radius:50%;
z-index:100;
}
</style>
</head>
<body>
<script>
function quad() {
for (i=0;i<24;i++) {
document.write('<a href="javascript:void(0)">'+i+'</a>');
}
return;
}
quad();
</script>
</body>
</html>



Comentarios sobre la versión: 1.0 (0)


No hay comentarios
 

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3880  
Revisar política de publicidad