这是一款基于jquery ui的可自由拖拽的弹性圆形菜单效果。该圆形菜单可以通过点击一个圆形按钮来弹出4个子菜单按钮。弹性效果由anime.js来制作,效果非常炫酷。
使用方法
在页面中引入jquery和jqueryui文件,以及anime.js和需要的样式文件style.css。
<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>
HTML结构
圆形菜单的HTML结构如下:
<div class="center menu"> <div id="myMenu"></div> </div>
初始化插件
在页面DOM元素加载完毕之后,通过下面的js代码来完成圆形菜单的拖拽功能,以及弹性效果。
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")
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!