jquery.ui实现悬浮可拖动伸缩展开图标菜单效果代码-html代码-BFW代码库

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/foundation-icons.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.1.11.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("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 = .........完整代码请登录后点击上方下载按钮下载查看