Effet de menu circulaire flexible basé sur l'interface utilisateur jquery qui peut être librement glissé

Bref tutoriel

Il s'agit d'un effet de menu circulaire flexible basé sur l'interface utilisateur jquery qui peut être librement déplacé. Le menu circulaire peut faire apparaître 4 boutons de sous-menu en cliquant sur un bouton circulaire. L'effet élastique est produit par anime.js, et l'effet est très cool.

Utilisation

Introduisez les fichiers jquery et jqueryui, ainsi que animation.js et le fichier de style requis style.css dans la page.

<link rel="stylesheet" href="css/style.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery-ui.min.js"></script>
<script src="path/to/anime.js"></script>

Structure HTML

La structure HTML du menu circulaire est la suivante :

<div class="center menu">
    <div id="myMenu"></div>
</div>

Plug-in d'initialisation

Après la page L'élément DOM est chargé, utilisez le code js suivant pour compléter la fonction glisser-déposer du menu circulaire et l'effet élastique.

var timeOut;
 
class Item {
    constructor(icon, backgroundColor) {
        this.$element = $(document.createElement("div"));
        this.icon = icon;
        this.$element.addClass("item");
        this.$element.css("background-color", backgroundColor);
        var i = document.createElement("i");
        $(i).addClass("fi-" + icon);
        this.$element.append(i);
        this.prev = null;
        this.next = null;
        this.isMoving = false;
        var element = this;
        this.$element.on("mousemove", function() {
            clearTimeout(timeOut);
            timeOut = setTimeout(function() {
                if (element.next && element.isMoving) {
                    element.next.moveTo(element);
                } 
            }, 10);
        });
    }
     
    moveTo(item) {
        anime({
            targets: this.$element[0],
            left: item.$element.css("left"),
            top: item.$element.css("top"),
            duration: 700,
            elasticity: 500
        });
        if (this.next) {
            this.next.moveTo(item);
        }
    }
 
    updatePosition() {    
        anime({
            targets: this.$element[0],
            left: this.prev.$element.css("left"),
            top: this.prev.$element.css("top"),
            duration: 200
        });
         
        if (this.next) {
            this.next.updatePosition();
        }
    }
}
 
class Menu {
    constructor(menu) {
        this.$element = $(menu);
        this.size = 0;
        this.first = null;
        this.last = null;
        this.timeOut = null;
        this.hasMoved = false;
        this.status = "closed";
    }
     
    add(item) {
        var menu = this;
        if (this.first == null) {
            this.first = item;
            this.last = item;
            this.first.$element.on("mouseup", function() {
                if (menu.first.isMoving) {
                    menu.first.isMoving = false;        
                } else {
                    menu.click();
                }
            }); 
            item.$element.draggable(
                {
                    start: function() {
                        menu.close();
                        item.isMoving = true;
                    }  
                },
                {
                    drag: function() {
                        if (item.next) {
                            item.next.updatePosition();
                        }
                    }
                },
                {
                    stop: function() {
                        item.isMoving = false;
                        item.next.moveTo(item);
                    }
                }
            );
        } else {
            this.last.next = item;
            item.prev = this.last;
            this.last = item;
        }
        this.$element.after(item.$element);
         
         
    }
     
    open() {
        this.status = "open";
        var current = this.first.next;
        var iterator = 1;
        var head = this.first;
        var sens = head.$element.css("left") < head.$element.css("right") ? 1 : -1;
        while (current != null) {
            anime({
                targets: current.$element[0],
                left: parseInt(head.$element.css("left"), 10) + (sens * (iterator * 50)),
                top: head.$element.css("top"),
                duration: 500
            });
            iterator++;
            current = current.next;
        }    
    }
     
    close() {
        this.status = "closed";
        var current = this.first.next;
        var head = this.first;
        var iterator = 1;
        while (current != null) {
            anime({
                targets: current.$element[0],
                left: head.$element.css("left"),
                top: head.$element.css("top"),
                duration: 500
            });
            iterator++;
            current = current.next;
        }
    }
     
    click() {
        if (this.status == "closed") {
            this.open();
        } else {
            this.close();
        }
    }
     
}
 
var menu = new Menu("#myMenu");
var item1 = new Item("list");
var item2 = new Item("torso", "#FF5C5C");
var item3 = new Item("social-facebook", "#5CD1FF");
var item4 = new Item("paypal", "#FFF15C");
var item5 = new Item("link", "#64F592");
 
menu.add(item1);
menu.add(item2);
menu.add(item3);
menu.add(item4);
menu.add(item5);
$(document).delay(50).queue(function(next) {
    menu.open();
    next();
    $(document).delay(1000).queue(function(next) {
        menu.close();
        next();
    });
});

Ce qui précède est le contenu de l'effet de menu circulaire élastique qui peut être librement déplacé en fonction de jquery ui. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). !