Question

我想实现一个jquery插件（http://www.jqueryscript.net/menu/Floating-Draggable-Popup-Menu-jQuery-Animate-js.html）。但我没有找到任何方式可以在此代码中添加facebook，twitter等链接。如果你知道我该怎么做，请告诉我这对我很有帮助。插件代码如下：

<!Doctype html>
<html>
<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">
<title>Floating Draggable Popup Menu Demo</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  background-color: #222222;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
}



.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 >
  <div id="myMenu"></div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/1.1.3/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 " + 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("fa-bars");
var item2 = new Item("fa-twitter", "#55acee");
var item3 = new Item("fa-facebook", "#3b5999");
var item4 = new Item("fa-google-plus", "#dd4b39");
var item5 = new Item("fa-pinterest", "#bd081c");

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();
    });
});
</script>

</body>
</html>

Answer 1

我认为你应该手动添加：）

    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 " + 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);
      });
  }

你应该添加第三个参数，比如构造函数（icon，backgroundColor，link）和

this.$element.on("click",function(){
    window.location(this.link)
})

浮动可拖动，弹出菜单，jQuery的动画-JS /

1 个答案: