communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Une implémentation de menu rotatif circulaire de classe?
迷茫
迷茫 2017-06-12 09:26:23
0
6
980

L'image du design est comme ceci. Cliquez sur l'un des éléments, puis il se déplacera en arc de cercle le long de la chaîne blanche
, comme un plateau tournant. Si oui, comment peut-il être mis en œuvre plus simplement et plus rapidement ? des idées.

-------Supplément-------
Pour la version mobile, en fait, cette pièce est considérée comme un tout. Ce n'est pas difficile si les lignes et les icônes changent, mais ce qu'il faut c'est que le. les icônes se déplaceront également en conséquence

迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

répondre à tous(6)
伊谢尔伦
伊谢尔伦2017-06-12 09:28:23 6 plancher

图标不动 圆环转动 可行？

Comme +0
Ajouter une réponse
洪涛
洪涛2017-06-12 09:28:23 5 plancher

Dans l'ensemble, créez un très grand bloc avec une petite fenêtre d'affichage. Lorsque vous cliquez dessus, le super bloc peut être pivoté. Ce très grand bloc est un tout composé d'un anneau et d'une petite icône (ou l'anneau et la petite icône sont transformés en deux touts. La largeur et la hauteur des deux blocs et le diamètre de conception de l'anneau doivent être les mêmes, donc que la taille de la petite icône est Ce n'est que lorsque le bloc tourne qu'il peut se connecter de manière transparente à l'anneau)

Comme +0
Ajouter une réponse
我想大声告诉你
我想大声告诉你2017-06-12 09:28:23 4 plancher

Plusieurs classes positionnent les éléments et stockent les noms de classe dans un tableau. Lorsqu'un élément est cliqué, la classe de chaque élément change à tour de rôle. Si vous souhaitez des effets d'animation, vous pouvez ajouter transition à chaque classe.

C'est une idée générale, vous pouvez l'essayer.

Comme +0
Ajouter une réponse
巴扎黑
巴扎黑2017-06-12 09:28:23 3 plancher

Je ne peux qu'en discuter. . . Parce que je ne suis pas sûr,

Si vous utilisez cette chaîne pour vous déplacer --- si vous utilisez une animation CSS ou JS, pensez-y, c'est une rotation d'élément importante. . . Il faut l'essayer pour connaître les performances. Pensez ensuite à utiliser une toile pour dessiner, ce qui sera gênant. Je veux garder le grand anneau stationnaire et calculer la position et l'angle de chaque carré dans l'anneau. . Je ne sais pas s'il existe un cadre pour ça, et je ne connais pas mon propre canevas. Bref, c'est très gênant.

Puis chaque icône. . Vous pouvez utiliser CSS ou js pour cela. . La clé est que cela implique des événements. . Je n'ai pas étudié comment l'élément canvas est lié aux événements. . .

Ce n'est qu'une idée de débutant. . Découvrez ceux des autres

Comme +0
Ajouter une réponse
typecho
typecho2017-06-12 09:28:23 2 plancher

Idée : Disposez les éléments, calculez la valeur de décalage (milieu absolu, centre en bas), cliquez sur l'élément pour obtenir l'index correspondant à l'index, comparez l'index avec la valeur de décalage, dans le sens inverse des aiguilles d'une montre à gauche, dans le sens des aiguilles d'une montre à droite, chaque fois que l'animation est terminée, répétez l'ordre des icônes d'organisation.

Remarque :

  • Cela devrait avoir la même structure que le défilement en boucle infinie. Il nécessite avant, milieu et arrière d'avoir trois ensembles de données originales, afin qu'il puisse être complété dans le sens des aiguilles d'une montre et dans le sens inverse des aiguilles d'une montre.

  • Par souci de compatibilité, il est recommandé que l'animation ne soit utilisée que comme transition, c'est-à-dire que lorsqu'un élément est cliqué, l'animation se termine pour ajuster dynamiquement le tri des éléments et redessiner la liste, c'est-à-dire chaque animation est une opération de tri de tableau 

    •  ;

Plan de mise en œuvre technique :

  • Utilisez CSS3 pour implémenter, la difficulté réside dans l'animation de rotation CSS3 ;

    • Dessiner avec toile, principe du cadre clé ;

    • Réalisé en svg, le principe est similaire à celui du canevas, sauf que les graphismes sont vectoriels ;

    • Utilisez la vidéo mp4, reportez-vous à https://www.apple.com/cn/mac-... ;

    • Utilisez l'animation par images clés, ce qui est plus compliqué

  •  ;

    • L'implémentation spécifique est toujours problématique. Vous pouvez rechercher des plug-ins d'arrangement d'arc associés, des animations CSS3, etc. Personnellement, je pense que Canvas et SVG sont plus fiables. Jetez simplement quelques idées et attendez avec impatience le maître.
Comme +0
Ajouter une réponse
迷茫
迷茫2017-06-12 09:28:23 1 plancher 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        .wrap {
            width: 100%;
            height: 100%;
        }

        .wrap {
            position: fixed;
            top: 0;
            left: 0;
        }

        .annulus {
            position: absolute;
            top: -552px;
            left: 0;
            right: 0;
            margin: auto;
            width: 1000px;
            height: 1000px;
            border-radius: 50%;
            border: 1px solid #ccc;
        }

        .annulus__bg {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            background: #fff url(YaoMing.jpg) center center no-repeat;
            border: 1px solid #ccc;
            transition: all 0.5s linear;
        }

        .annulus__item {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #fff url(YaoMing.jpg) center center / cover no-repeat;
            border: 1px solid #ccc;
            transition: all 0.5s linear;
        }
    </style>
    <script>
        onload = () => {
            var dataArr = [
                "90|-90", "60|-60", "30|-30", "0|0", "-30|30", "-60|60", "-90|90"
            ], numArr = [
                0, 1, 2, 3, 4, 5, 6
            ], lock = false;
            document.querySelectorAll(".annulus__item").forEach((v, i) => {
                document.querySelector(".annulus__item--" + numArr[i]).style.transform =
                    "rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";
                v.addEventListener("click", function () {
                    if(lock) return false;
                    lock = true;
                    setTimeout(function() { lock = false; }, 500);
                    var content = numArr[3], target = /\d+$/.exec(this.className)[0];
                    if(+content + 1 == target || content - 6 == target) {
                        mainDeg += 30;
                        numArr.push(numArr.shift());
                        document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";
                        document.querySelector(".annulus__item--" + numArr[6]).style.transition = "none";
                        setTimeout(() => { document.querySelector(".annulus__item--" + numArr[6]).style.transition = "all 0.5s linear"; }, 0);
                    } else if (content - 1 == target || content + 6 == target) {
                        mainDeg -= 30;
                        numArr.unshift(numArr.pop());
                        document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";
                        document.querySelector(".annulus__item--" + numArr[0]).style.transition = "none";
                        setTimeout(() => { document.querySelector(".annulus__item--" + numArr[0]).style.transition = "all 0.5s linear"; }, 0);
                    }                    
                    for (var i = 0; i < 7; i++) {
                        document.querySelector(".annulus__item--" + numArr[i]).style.transform =
                            "rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";
                    }
                });
            });
            var mainDeg = 0;
            onkeydown = (event) => {
                if (event.keyCode === 37) {
                    mainDeg += 30;
                    document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";
                    numArr.push(numArr.shift());
                    document.querySelector(".annulus__item--" + numArr[6]).style.transition = "none";
                    setTimeout(() => { document.querySelector(".annulus__item--" + numArr[6]).style.transition = "all 0.5s linear"; }, 0);
                    for (var i = 0; i < 7; i++) {
                        document.querySelector(".annulus__item--" + numArr[i]).style.transform =
                            "rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";
                    }
                }
                if (event.keyCode === 39) {
                    mainDeg -= 30;
                    document.querySelector(".annulus__bg").style.transform = "rotate(" + mainDeg + "deg)";
                    numArr.unshift(numArr.pop());
                    document.querySelector(".annulus__item--" + numArr[0]).style.transition = "none";
                    setTimeout(() => { document.querySelector(".annulus__item--" + numArr[0]).style.transition = "all 0.5s linear"; }, 0);
                    for (var i = 0; i < 7; i++) {
                        document.querySelector(".annulus__item--" + numArr[i]).style.transform =
                            "rotate(" + dataArr[i].split("|")[0] + "deg) translateY(500px) rotate(" + dataArr[i].split("|")[1] + "deg)";
                    }
                }
            }
        }
    </script>
</head>

<body>
    <p class="wrap">
        <p class="annulus">
            <p class="annulus__bg"></p>
            <p class="annulus__item annulus__item--0"></p>
            <p class="annulus__item annulus__item--1"></p>
            <p class="annulus__item annulus__item--2"></p>
            <p class="annulus__item annulus__item--3"></p>
            <p class="annulus__item annulus__item--4"></p>
            <p class="annulus__item annulus__item--5"></p>
            <p class="annulus__item annulus__item--6"></p>
        </p>
    </p>
</body>

</html>

Téléchargez le code et changez l'image et c'est fait
C'est très simple, juste pour référence

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal