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

Versión 1

Publicado el 18 de Noviembre del 2013gráfica de visualizaciones de la versión: Versión 1
7.312 visualizaciones desde el 18 de Noviembre del 2013
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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2537