IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Agrandir photo puis la déplacer en la reduisant


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Pour le plaisir
    Inscrit en
    Novembre 2012
    Messages
    178
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Pour le plaisir
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Novembre 2012
    Messages : 178
    Par défaut Agrandir photo puis la déplacer en la reduisant
    Bonjour
    je cherche un tuto ou me dire comment faire pour quand je clic sur ajout panier, agrandi une photo puis le déplace tous en la réduisant dans icône panier.
    comme sur le site ici quand tu ajoute au panier sans la pop-up.
    https://www.topbiz.fr/70-pc-de-bureau
    j'ai fait le début mais après je ne vois pas comment faire

    la fonction quand je clic sur le panier
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    if (document.getElementById('ajopanier')){
          document.getElementById('ajopanier').addEventListener('click', function(){
       imgpanier();	  
       lookpanier('panier');
    });
    }
     
    function imgpanier() {
    var photo_princ = document.getElementById('big_pict') ;
    photo_princ.removeAttribute("class");	 
    photo_princ.classList.add('zomphoto');
    }
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .zomphoto{
    	transform:scale(1.5);	 
    	transition:all .25s;
    	}

    une aide, merci

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 681
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 681
    Par défaut
    une 1re remarque si vous voulez vous baser sur le site que vous citez : l'image en question n'est pas directement déplacée mais c'est une copie de l'image qui se dirige vers le panier.
    pour faire cela vous aurez besoin de la méthode suivante qui va créer une nouvelle balise img :
    https://developer.mozilla.org/fr/doc.../createElement

    ensuite je ne connais pas assez les transitions en css pour savoir si ça pourrait vous être utile. donc la 2e méthode serait de faire des animations pas à pas en javascript qui déplaceraient l'image tout en la réduisant.
    vous pouvez utiliser la méthode suivante pour déclencher chaque étape :
    https://developer.mozilla.org/fr/doc...API/setTimeout

  3. #3
    Membre confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Novembre 2018
    Messages
    184
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2018
    Messages : 184
    Par défaut
    Bonjour,

    Je te propose de regarder les fonctionnalités de jQueryUI qui possède le genre d’événement que tu demandes (en particulier le "effect" > "transfer").

    Après si c'est pour une boutique en ligne, tu utilises un CMS genre Wordpress ou Joomla ? Il y a peut être un effet à activer dans l'un deux pour avoir ce que tu recherches.

    Bonne journée

    Sylvain

  4. #4
    Membre confirmé
    Homme Profil pro
    Pour le plaisir
    Inscrit en
    Novembre 2012
    Messages
    178
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Pour le plaisir
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Novembre 2012
    Messages : 178
    Par défaut
    merci je vais regarder tous ça.
    je code à l'ancienne avec noteopat++
    si je n'arrive pas avec js, je ferais avec ça
    https://api.jqueryui.com/transfer-effect/
    mais je cherche quelque chose de léger

  5. #5
    Membre très actif
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 80
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 744
    Par défaut
    jour

    si tu aime le pur js essai ça

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style type="text/css">
     
    body{
     
       background-color:#91A8D2;
       height:1200px;
    }
     
    .rectangle1{
     
        height:50px;
            width :100px;
            margin-left:1000px;
            margin-top:80px;
            background:red;
            
    }
     
    .rectangle2{
     
        height:40px;
            width :60px;
            margin-left:1000px;
            margin-top:60px;
            background:blue;
            
    }
     
    #cible{
     
        height:60px;
            width :60px;
            left:30px;
            top:400px;
            background:white;
            position:fixed;
            
    }
     
    </style>
     
     
    <script>
     
    function preparation(elem,cible){
     
    var bd=document.getElementById(elem).getBoundingClientRect();
     
    var element=document.getElementById(elem).cloneNode(true);
     
    element.style.id="";
    element.style.position="absolute";
    element.style.marginLeft="0px";
    element.style.marginTop="0px";
    element.style.left=bd.left+"px";
    element.style.top=bd.top+"px";
     
    document.body.appendChild(element);
     
    var element_cible=document.getElementById(cible);
     
    var duree_animation = 500;
     
    var nombre_de_cycle = Math.floor(duree_animation/(1000/25));
     
    var taille_h_finale=5;
     
    var taille_w_finale=5;
     
     
    var place=element_cible.getBoundingClientRect()
     
     
     
    var distance_l=( element_cible.offsetWidth/2)+place.left-element.offsetLeft-(taille_w_finale/2);
     
    var distance_t=( element_cible.offsetHeight/2)+place.top-element.offsetTop-(taille_h_finale/2);
     
    var donne={
     
                    nombre_de_cycle:Math.floor(duree_animation/(1000/25)),
     
                    taille_ho:element.offsetHeight,
     
                    distance_lo:element.offsetLeft,
     
                    distance_to:element.offsetTop,
     
                    compteur:0,
     
                    taille_h_par_cycle:(element.offsetHeight-taille_h_finale) / nombre_de_cycle,
     
                    taille_w_ratio:element.offsetWidth/element.offsetHeight,
     
                    distance_l_par_cycle:distance_l / nombre_de_cycle,
     
                    distance_t_par_cycle:distance_t / nombre_de_cycle,
     
                    angle:360/nombre_de_cycle,
     
                    element:element
     
            }
     
            deplacer(donne)
     
    }
     
     
    function deplacer(donne){
     
            donne.element.style.left=donne.distance_lo+donne.distance_l_par_cycle*donne.compteur+"px";
     
            donne.element.style.top=donne.distance_to+donne.distance_t_par_cycle*donne.compteur+document.documentElement.scrollTop+"px";
     
            donne.element.style.height=donne.taille_ho-donne.taille_h_par_cycle*donne.compteur+"px";
     
            donne.element.style.width=donne.taille_w_ratio*donne.element.offsetHeight+"px";
     
            donne.element.style.transform='rotate('+donne.angle*donne.compteur+'deg)';
     
            donne.compteur++
            
            if(donne.compteur<=donne.nombre_de_cycle){
     
                    setTimeout(deplacer,(1000/25),donne)
            }
            
            else{
            donne.element.remove()
            
            }
    }
     
    </script>
    </head>
    <body>
     
    <br>
    <button onclick='preparation("rectangle1","cible")'>rectangle rouge</button>
    <button onclick='preparation("rectangle2","cible")'>rectangle bleu</button>
     
    <div id='rectangle1' class='rectangle1'>
    </div>
     
    <div id='rectangle2' class='rectangle2'>
    </div>
     
     
    <div id='cible'>
    </div>
    </body></html>

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    ne pas hésiter à regarder également du côté de l'API Animate alliant JavaScript et CSS.

  7. #7
    Membre confirmé
    Homme Profil pro
    Pour le plaisir
    Inscrit en
    Novembre 2012
    Messages
    178
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Pour le plaisir
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Novembre 2012
    Messages : 178
    Par défaut
    merci encore pleins de possibilité.
    une question la je fait la copie de l'image

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function imgpanier() {
    var photo_princ = document.getElementById('big_pict') ;
     
     
    let div = document.createElement("div");
    div.classList.add("card");
     
     
    let img = document.createElement("img");
    img.classList.add("zomphoto");
    img.alt = "Photo de l'article";
    img.src = photo_princ.src;
    div.appendChild(img);
    div.style.zIndex = 2;
     
    document.querySelector("body").appendChild(div);
     
    }
    mais elle est positionné en bas de page.
    Est ce que je dois la bouger avec du css: position absolute mais qui risque de foiré en responsive ou il y a un moyen de la placer sur l'image actuelle
    avec du js ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Prendre une photo puis l'afficher
    Par thibaut38410 dans le forum Android
    Réponses: 9
    Dernier message: 20/02/2014, 18h42
  2. Comment puis-je déplacer un élément
    Par pierrot10 dans le forum jQuery
    Réponses: 1
    Dernier message: 09/01/2013, 22h06
  3. Réponses: 23
    Dernier message: 25/07/2011, 14h57
  4. Réponses: 5
    Dernier message: 23/06/2011, 00h27
  5. [Swing] Comment insérer une image png puis la déplacer?
    Par Cervantes dans le forum AWT/Swing
    Réponses: 3
    Dernier message: 25/05/2006, 19h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo