Imagen de perspectiva 3D rotador con reflejos-ImageRotatorJS
| Autor: | mjza |
|---|---|
| Views Total: | 2,259 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 24, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
ImageRotatorJS es una librería JavaScript pura para crear un rotador de imágenes 3D con perspectiva y reflejos realistas. Cada imagen puede ser ' ampliada ', ya que se acerca a la parte inferior central del rotor para dar un efecto 3D. El ' zoom ' se especifica en la llamada de inicialización y se aplica a la anchura, la altura y el tamaño de fuente de la imagen.
Funcionamiento
Descargue e importe el ImageRotator-min. js en la Página Web.
<script src="ImageRotator-min.js"></script>
Los elementos que se mostrarán en el rotador se definen en el código HTML y se debe asignar un nombre de clase que incluya una cadena única de caracteres. Estos elementos deben anidarse en un DIV primario. A este DIV padre se le debe asignar un nombre de ID único y el ancho y el alto determinarán las dimensiones horizontales y verticales del rotador. Por ejemplo:
<div id="Ellipse"> <img class="RotatingIcon" src="img/img11.jpg"> <img class="RotatingIcon" src="img/img10.jpg"> <img class="RotatingIcon" src="img/img1.jpg"> <img class="RotatingIcon" src="img/img9.jpg"> <img class="RotatingIcon" src="img/img1.png"> <img class="RotatingIcon" src="img/img2.jpg"> </div>
Normalmente, cada aplicación se inicializaría desde un cuerpo < > o una llamada de evento de ventana OnLoad a la función ' ImageRotatorJS '. Por ejemplo:
<body onload="ImageRotatorJS('Ellipse','RotatingIcon',5,110,3000, 0, 90, 40, 'white');"> Parámetros:
- parámetro 0 = (String) {containerId}: el nombre de ID único del DIV primario.
- parámetro 1 = (String) {elementsClass}: la cadena única del nombre de clase del elemento para indicar la inclusión.
- parámetro 2 = (dígitos) {rotationSpeed}: la velocidad de rotación, 10 = rápido, 500 = lento. 10 = 0,01 segundos
- parámetro 3 = (dígitos) {zoomPercentage}: el elemento ' zoom ', 0 = sin zoom, 100 = 100% zoom.
- parámetro 4 = (dígitos) {holdDelay}: el retardo inicial ' Hold '. Un número en milisegundos que indica cuánto tiene que esperar entre rotaciones.
- parámetro 5 = (dígitos) {rotationAngle}: +/-0 ~ 360 grados. Si asumimos un eje Z ortogonal a la pantalla, entonces 45 grados causan a las imágenes de sloop a la pantalla
- parámetro 6 = (dígitos) {startAngle}: +/-0-360 grados. La posición inicial de la primera imagen.
- parámetro 7 = (dígitos) {reflectionPercentage}: 0 ~ 100. La cantidad de reflejo de las imágenes
- parámetro 8 = (String) {circumferenceDotsColor}: (opcional) el color de la circunferencia (punteado), más usos para fines de desarrollo.
Hay dos funciones para controlar la rotación, ' IRJS_StartRotation ' y ' IRJS_StopRotation '.
<!-- Calling this function will stop the ellipse rotation.-->
<!-- parameter 0 =(string) the unique ID name of the parent DIV.-->
<input type="button" name="" value="Stop" onmouseover="IRJS_StopRotation('Ellipse1');">
<!-- Calling this function will rotate the ellipse to an incremental point. -->
<!-- parameter 0 =(string) the unique ID name of the parent DIV. -->
<!-- parameter 1 =(1 | -1) the direction of rotation, 1 = clockwise, -1 = anti clockwise. -->
<!-- parameter 2 =(digits) (optional) to change the 'Hold' delay. -->
<input type="button" name="" value="Next" onclick="IRJS_StartRotation('Ellipse1',1);">
<input type="button" name="" value="Back" onclick="IRJS_StartRotation('Ellipse1',-1);"> Hay dos funciones similares con los nombres ' startRotation ' y ' stopRotation ' que se puede llamar en el objeto ImageRotatorJS para iniciar o detener la rotación. Simplemente no es necesario pasar el identificador del elemento, pero los argumentos de resto son necesarios.
