tips 移入悬浮功能

前景：

页面部分区域需要移入悬浮效果，当然默认的 title 也是可以的，最多只是格格不入，但是却是最为靠谱的。。

思路：

基于 jq 实例扩展、使用立即执行函数保持功能独立、自定义类实现功能封装的定位解释小功能

实现：

1.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>tip</title>
  <link rel="stylesheet" href="tip.css" />
  <link rel="stylesheet" href="animate.css" />
</head>

<body>
  <div id="left" class="test left" data-mess="top title <br /> some mes ">left</div>

  <script src="https://blog-static.cnblogs.com/files/justSmile2/jquery-1.9.1.min.js"></script>
  <script src="tip.js"></script>

  <script type="text/javascript">
    $("#left").tips({
      "posType": "right"
    });
  </script>
</body>

</html>

View Code

2.css

tip.css

.iTooltipMes {
  position: absolute;
  display: block;
  color: #000;
  font-size: 12px;
  padding: 10px;
  background: #fff;
  border: 1px solid #999;
  border-radius: 3px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 999999;
}


.iToolTri {
  position: absolute;
  z-index: 1;
  display: block;
  width: 0px;
  height: 0px;
  font-size: 0px;
  line-height: 0px;
  border: 8px solid #999999;
}

.iToolTri i {
  position: absolute;
  z-index: 1;
  display: block;
  width: 0px;
  height: 0px;
  font-size: 0px;
  line-height: 0px;
  border: 6px solid #ffffff;

}

.iToolTriTop {
  left: 50%;
  bottom: -16px;
  margin-left: -8px;
  border-color: #999999 transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}

.iToolTriTop i {
  left: -6px;
  bottom: -4px;
  border-color: #ffffff transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}

.iToolTriBtm {
  left: 50%;
  top: -16px;
  margin-left: -8px;
  border-color: transparent transparent #999999 transparent;
  border-style: dashed dashed solid dashed;
}

.iToolTriBtm i {
  left: -6px;
  top: -4px;
  border-color: transparent transparent #ffffff transparent;
  border-style: dashed dashed solid dashed;
}

.iToolTriRt {
  left: -16px;
  top: 50%;
  margin-top: -8px;
  border-color: transparent #999999 transparent transparent;
  border-style: dashed solid dashed dashed;
}

.iToolTriRt i {
  left: -4px;
  top: -6px;
  border-color: transparent #ffffff transparent transparent;
  border-style: dashed solid dashed dashed;
}


.iToolTriLt {
  right: -16px;
  top: 50%;
  margin-top: -8px;
  border-color: transparent transparent transparent #999999;
  border-style: dashed dashed dashed solid;
}

.iToolTriLt i {
  right: -4px;
  top: -6px;
  border-color: transparent transparent transparent #ffffff;
  border-style: dashed dashed dashed solid;
}



* {
  margin: 0px;
  padding: 0px;
}

body {
  position: relative;
  height: 1500px;
  font-size: 14px;
}

.test {
  position: absolute;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #f0f;
  cursor: pointer;
}

.left {
  left: 10px;
  top: 10px;
}

.top {
  left: 50%;
  top: 10px;
  margin-left: -50px;
}

.right {
  right: 10px;
  top: 10px;
}

.bottom {
  left: 50%;
  bottom: 10px;
  margin-left: -50px;
}

.center {
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -15px;
}

View Code

animate.css

.animated {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

View Code

3.js

tip.js

(function ($, window, document, undefined) {
  var pluginName = "tips",
    defaults = {
      floor: '.iTooltipMes',
      addClass: "",
      dataMess: "",
      posType: "top" //  [left|top|right|bottom]
    };

  function Plugin(element, options) {
    var options = $.extend(true, {}, defaults, options);
    this.opts = options;
    this.$elem = element;
    this.elem = element.selector;
    this.anis = {
      top: "fadeInDown",
      right: "fadeInLeft",
      bottom: "fadeInUp",
      left: "fadeInRight"
    };
    this.tris = {
      top: "iToolTriTop",
      right: "iToolTriRt",
      bottom: "iToolTriBtm",
      left: "iToolTriLt"
    };
    this.isOk = true;
    this.tmpPosType = null;
    this.init();
  };

  Plugin.prototype = {
    init: function () {
      var _this = this;

      $(document).on("mouseover", _this.elem, function () {
        var $this = $(this);
        if (_this.isOk) {
          _this.isOk = false;
          _this.setShow($this);
        }
      });

      // $(document).on("mouseover", _this.opts.floor, function () {
      //   _this.isOk = true;
      //   _this.setShow($this);
      // });
      // $(document).on("mouseout", _this.opts.floor, function () {
      //   _this.isOk = false;
      //   $(_this.opts.floor).remove();
      // });

      $(document).on("mouseout", _this.elem, function () {
        if (!_this.isOk) {
          _this.isOk = true;
          _this.tmpPosType = _this.opts.posType;
          $(_this.opts.floor).remove();
        }
      });

    },
    setShow: function (obj) {
      var _this = this;

      var l = obj.offset().left;
      var t = obj.offset().top;
      var w = obj.width();
      var h = obj.height();

      var mess = _this.opts.dataMess || obj.attr("data-mess");

      var tmpHtml = "<div class='iTooltipMes animated'>" + mess + "<i class='iToolTri'><i></i></i></div>";
      $("body").append(tmpHtml);
      // _this.$elem.append(tmpHtml);

      var iTooltipMes = $(_this.opts.floor);
      var ow = iTooltipMes.outerWidth();
      var oh = iTooltipMes.outerHeight();

      var tmpt = 0;
      var tmpl = 0;
      var distance = 10;

      var win = $(window);
      var winW = win.width();
      var winH = win.height();
      var winTop = win.scrollTop();

      if (t < (h + distance + winTop) && _this.opts.posType === "top") {
        _this.tmpPosType = "bottom";
      }

      if ((l + w + ow > winW) && _this.opts.posType === "right") {
        _this.tmpPosType = "left";
      }

      if ((l < ow) && _this.opts.posType === "left") {
        _this.tmpPosType = "right";
      }

      if (((t - winH + oh) > winTop) && _this.opts.posType === "bottom") {
        _this.tmpPosType = "top";
      }


      _this.tmpPosType = _this.tmpPosType || _this.opts.posType;

      switch (_this.tmpPosType) {
        case "top":
          tmpt = t - oh - distance;
          tmpl = l + ((w - ow) / 2);
          break;
        case "right":
          tmpt = t - ((oh - h) / 2);
          tmpl = l + w + distance;
          break;
        case "bottom":
          tmpt = t + h + distance;
          tmpl = l + ((w - ow) / 2);
          break;
        case "left":
          tmpt = t - ((oh - h) / 2);
          tmpl = l - ow - distance;
          break;
        default:
          break;
      }

      if (!!_this.opts.addClass) {
        iTooltipMes.addClass(_this.opts.addClass);
      }

      iTooltipMes.addClass(_this.anis[_this.tmpPosType]).css({
        left: tmpl + "px",
        top: tmpt + "px"
      }).find(".iToolTri").addClass(_this.tris[_this.tmpPosType]);

    }
  };

  $.fn[pluginName] = function () {
    $(this).selector && new Plugin(this, arguments[0])
  }

})(jQuery, window, document);

View Code