android 圆形菜单拖拽,前端jQuery UI可拖拽弹性圆形菜单按钮特效代码

炫酷的效果图

效果是不是很炫酷！

这个是一款可以通过点击一个圆形按钮来弹出4个子菜单按钮的网页导航菜单动画效果。

由于代码过多，这里只展示部分JS代码，

需要完整源码可以来我的前端群111645711，已上传到群文件

废话不多说，上代码

index.js

var timeOut;

class Item {

constructor(icon, backgroundColor) {

this.$element =

$(document.createElement_x("div"));

this.icon = icon;

this.$element.addClass("item");

this.$element.css("background-color",

backgroundColor);

var i = document.createElement_x("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();

});

});