Código de JQuery - Rotar horizontalmente una imagen por la pantalla

Imágen de perfil

Rotar horizontalmente una imagen por la pantallagráfica de visualizaciones


JQuery

Publicado el 18 de Noviembre del 2013 por Xavi
3.901 visualizaciones desde el 18 de Noviembre del 2013. Una media de 28 por semana
Código que muestra como rotar una imagen dentro de un div, haciendo el efecto de entrar la imagen por el inicio y salir por el final del div al mismo tiempo.

Versión 1

Publicado el 18 de Noviembre del 2013gráfica de visualizaciones de la versión: Versión 1
3.902 visualizaciones desde el 18 de Noviembre del 2013. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>Rotar horizontalmente una imagen por la pantalla</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style>
        #rotarImagen-wrapper {
            position:relative;
            height:100px;
            background-color:#929cbf;
            width:500px;
        }
        #rotarImagen-wrapper img {
            position:absolute;
            top:20px;
        }
        #img1 {
            left:-133px;
        }
        #img2 {
            display:none;
        }
    </style>
    <script>
        $(document).ready(function(){
 
            imagen="http://www.lawebdelprogramador.com/img/logo-lwp.png";
             $('#img1').attr("src", imagen).load(function(){
 
                // Obtenemos la anchura de la imagen
                imgWidth=$("#img1").width();
 
                // Definimos la posición inicial como la anchura de la imagen en
                // negativo
                posicion=-imgWidth;
 
                // Obtenemos la anchura del div donde se mostrara la imagen en
                // movimiento
                backgroundWidth=$("#rotarImagen-wrapper").width();
 
                // Ejecutamos esta función cada 50 milisegundos
                setInterval(function()
                {
                    // Aumentamos la posicion de la imagen 3 pixeles
                    posicion+=3;
 
                    // Movemos la imagen a su nueva posicion horizontal
                    $("#img1").css("left",posicion);
 
                    // Si la parte derecha de la imagen sobrepasa la anchura
                    // maxima que tiene definida...
                    if(posicion+imgWidth>backgroundWidth)
                    {
                        // Mostramos la segunda imagen, y la posicionamos en el
                        // lado derecho simulando la rotación de la imagen
                        $("#img2").show().css("left",posicion-backgroundWidth);
 
                        // Una vez la imagen inicial ha sobrepasado por completo
                        // la anchura maxima definida...
                        if(posicion>backgroundWidth+imgWidth)
                        {
                            // Ponemos la posicion de la imagen en el lugar
                            // de la segunda imagen para volver a empezar el
                            // ciclo
                            posicion=posicion-backgroundWidth;
 
                            $("#img1").css("left",posicion);
 
                            // Escondemos la segunda imagen que no volvera a
                            // aparecer hasta que la primera imagen se vuelva a
                            // pasar de los limites
                            $("#img2").hide();
                        }
                    }
                }, 50);
            });
        });
    </script>
</head>
 
<body>
 
<h1>Rotar horizontalmente una imagen por la pantalla</h1>
<div id="rotarImagen-wrapper">
    <img src="" id="img1">
    <img src="http://www.lawebdelprogramador.com/img/logo-lwp.png" id="img2">
</div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2537