Community Learn Tools Library Leisure
search
English
javascript - A class circular rotating menu implementation?
迷茫
迷茫 2017-06-12 09:26:23
0
6
1007

The design picture is like this. Click on one of the elements, and then it will move in an arc along the white chain
, like a turntable. If this is the case, how can it be implemented more simply and quickly? Please give me some ideas.

-------Supplement-------
For the mobile terminal, in fact, this piece is considered a whole. It is not difficult to change the lines and icons only, but what is needed is the icon. Will follow the move

迷茫
迷茫

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

reply all(6)
伊谢尔伦
伊谢尔伦2017-06-12 09:28:23 6 floor

The icon does not move and the ring rotates. Is this possible?

Like +0
Add Reply
洪涛
洪涛2017-06-12 09:28:23 5 floor

As a whole, make a super large block with a small viewport. When clicked, the super block can be rotated. This super block is a whole made of a ring and a small icon (or the ring and the small icon are made into two wholes. The width and height of the two blocks and the design diameter of the ring should be the same, so that the size of the small icon is Only when the block rotates can it seamlessly connect with the ring)

Like +0
Add Reply
我想大声告诉你
我想大声告诉你2017-06-12 09:28:23 4 floor

Several classes position elements and store class names in an array. When an element is clicked, the class of each element is switched in turn. If you want animation effects, you can add transition to each class.

This is a general idea, you can try it.

Like +0
Add Reply
巴扎黑
巴扎黑2017-06-12 09:28:23 3 floor

I can only discuss it. . . Because I’m not sure,

If you use that chain to move---if you use css or js animation, think of it, it is a big element rotation. . . You have to try it to know the performance. Then consider using canvas to draw, which will be troublesome. I want to keep the big ring stationary and calculate the position and angle of each square in the ring. . I don’t know if there is any framework for this, and I’m not familiar with my own canvas. In short, it’s very troublesome.

Then each icon. . You can use css or js for this. . The key is that it involves events. . I haven't studied how the canvas element is related to events. . .

This is just a rookie idea. . Check out other people’s

Like +0
Add Reply
typecho
typecho2017-06-12 09:28:23 2 floor

Idea: arrange the items, calculate the offset value (absolute midpoint, bottom center), click on the item to get the index corresponding to the index, compare the index with the offset value, counterclockwise on the left, clockwise on the right, each time the animation is completed, repeat Sort the icons.

Note:

  • This should have the same structure as infinite loop scrolling. It requires front, middle and back to have three sets of original data, so that it can be completed both clockwise and counterclockwise.

  • For the sake of compatibility, it is recommended that the animation is only used as a transition, that is, when an item is clicked, the animation is completed to dynamically adjust the sorting of the items and redraw the list, that is, each animation is an array sorting operation;

Technical implementation plan:

  • Use css3 to implement, the difficulty lies in css3 rotation animation;

  • Drawing with canvas, key frame principle;

  • Made with svg, the principle is similar to canvas, except that the graphics are vector;

  • Use mp4 video, refer to https://www.apple.com/cn/mac-... ;

  • Use key frame animation, which is more complicated;

The specific implementation is still troublesome. You can search for related arc arrangement plug-ins, css3 animations, etc. Personally, I think canvas and svg are more reliable. Let's throw some ideas and look forward to the master.

Like +0
Add Reply
迷茫
迷茫2017-06-12 09:28:23 1 floor 
<!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>

Upload the code and change the picture and it’s done
It’s very simple, just for reference

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template