jquery-ui实现可拖拽弹性分享按钮效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery-ui实现可拖拽弹性分享按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import "https://fonts.googleapis.com/css?family=Open+Sans"; body { background-color: #494A5F; color: white; font-family: 'Open Sans', sans-serif; font-size: 12px; } h2 { position: absolute; left: 20px; top: 0px; z-index: -1; } .center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } .menu { width: 40px; height: 40px; } .title { width: 300px; height: 10px; top: 60px; } .item { position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; background-color: white; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; text-align: center; line-height: 40px; } i { font-size: 24px; color: #222222; } </style> </head> <body> <div class="center menu"> <div id="myMenu"></div> </div> <div class="center title"> <h2>鼠标移上去点击拖动!</h2> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.11.0.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime-min.js"></script> <script > 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("fa fa-lg fa-" + 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) { t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0