前景：

页面部分区域需要移入悬浮效果，当然默认的 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>

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:;

}

.iToolTri {

  position: absolute;

  z-index:;

  display: block;

  width: 0px;

  height: 0px;

  font-size: 0px;

  line-height: 0px;

  border: 8px solid #999999;

}

.iToolTri i {

  position: absolute;

  z-index:;

  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;

}

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:;

    -webkit-transform: translateY(-20px);

    transform: translateY(-20px);

  }

  100% {

    opacity:;

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

@keyframes fadeInDown {

  0% {

    opacity:;

    -webkit-transform: translateY(-20px);

    -ms-transform: translateY(-20px);

    transform: translateY(-20px);

  }

  100% {

    opacity:;

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

  }

}

.fadeInDown {

  -webkit-animation-name: fadeInDown;

  animation-name: fadeInDown;

}

@-webkit-keyframes fadeInLeft {

  0% {

    opacity:;

    -webkit-transform: translateX(-20px);

    transform: translateX(-20px);

  }

  100% {

    opacity:;

    -webkit-transform: translateX(0);

    transform: translateX(0);

  }

}

@keyframes fadeInLeft {

  0% {

    opacity:;

    -webkit-transform: translateX(-20px);

    -ms-transform: translateX(-20px);

    transform: translateX(-20px);

  }

  100% {

    opacity:;

    -webkit-transform: translateX(0);

    -ms-transform: translateX(0);

    transform: translateX(0);

  }

}

.fadeInLeft {

  -webkit-animation-name: fadeInLeft;

  animation-name: fadeInLeft;

}

@-webkit-keyframes fadeInUp {

  0% {

    opacity:;

    -webkit-transform: translateY(20px);

    transform: translateY(20px);

  }

  100% {

    opacity:;

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

@keyframes fadeInUp {

  0% {

    opacity:;

    -webkit-transform: translateY(20px);

    -ms-transform: translateY(20px);

    transform: translateY(20px);

  }

  100% {

    opacity:;

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

  }

}

.fadeInUp {

  -webkit-animation-name: fadeInUp;

  animation-name: fadeInUp;

}

@-webkit-keyframes fadeInRight {

  0% {

    opacity:;

    -webkit-transform: translateX(20px);

    transform: translateX(20px);

  }

  100% {

    opacity:;

    -webkit-transform: translateX(0);

    transform: translateX(0);

  }

}

@keyframes fadeInRight {

  0% {

    opacity:;

    -webkit-transform: translateX(20px);

    -ms-transform: translateX(20px);

    transform: translateX(20px);

  }

  100% {

    opacity:;

    -webkit-transform: translateX(0);

    -ms-transform: translateX(0);

    transform: translateX(0);

  }

}

.fadeInRight {

  -webkit-animation-name: fadeInRight;

  animation-name: fadeInRight;

}

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);

tips 移入悬浮功能的更多相关文章

  1. 【WPF】样式与模板：鼠标移入/悬浮时按钮的背景色不改变

    情况:鼠标移到按钮上,默认情况是按钮背景色会改变的,网上也能搜到很多如何自定义改变的背景色. 需求:现在需求反过来,想要鼠标移到按钮上,保持按钮的背景色不改变. 一种思路:在样式文件中,使用Multi ...

  2. 一个巧妙的实现悬浮的tableViewHeader的方法

    之前因为工作需要要实现一个类似的 悬浮+视差的headerView的效果, 研究了好久没研究出来怎么做,最后用UICollectionView + CSStickyHeaderFlowLayout的方 ...

  3. jquery tips简易使用方法 新手必看

    使用jquery1.12.4以上版本 使用jquery插件 tips .beg-pull-right 点击时的选择器 在这里写的是一个类选择器   记得引入jquery $(".beg-pu ...

  4. MIP 技术月报（4月）：支持熊掌号登录；优化页面悬浮元素

    之前由MIP团队维护的<移动 Web 加速技术月报>从本期开始,正式升级为<MIP 技术月报>,与以往不同的是,<MIP 技术月报>将会与大家分享包含移动加速技术以 ...

  5. 鼠标悬浮触发事件（onmouseover）实现

    将鼠标移至(悬浮)到某个标签范围内触发事件或提示消息等效果实现的关键词为:onmouseover. 代码: <!DOCTYPE html> <html> <head> ...

  6. 【Cocos2d-Js基础教学（3）各种基类的定义和使用】

    在游戏开发过程中我们会遇到很多继承关系的处理,特别是层级之间的关系处理. 可能有的同学也做过类似的处理,比如: 游戏的显示层分级为: 底层Scene ,界面层Layer,页面层Page,弹框层Tip等 ...

  7. Jason Wang: 结对编程 CountWord(第三次作业)

    本次作业地址: https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/homework/2882 学号: 201731072323 ...

  8. python学习笔记——（二）循环

    ·密文输入引入getpass库使用getpass.getpass("password:")tips:该功能在PyCharm中不好使,只能在命令行用 ·python强制缩进,省略了大 ...

  9. Jenkins-client模式配置

    Jenkins配置master-slave模式 本来想着先写一篇jenkins安装的流程,但是现在jenkins做的已经非常完善了,有.war文件,直接在tomcat启动即可,所以这里就不多说了,小白 ...

随机推荐

  1. php stomp.dll 下载地址

    http://pecl.php.net/package/stomp/1.0.9/windows 查看方法,打开phpinfo

  2. diff 命令实用

    1.概述 本文将要讨论的是diff命令,diff用来比较两个文件.当然文件比较的工具很多,windows系统下面就有不错的工具可以使用,例如常用的Beyond Compare,WinMerge都是图形 ...

  3. The address where a.out.debug has been loaded is missing以及No symbol "*" in current context原因与解决方法

    最近,在debug core的时候,发现p 变量的时候提示“No symbol "*" in current context”,我们的代码使用-g编译的,经查有可能是下列几个原因或 ...

  4. BeautifulSoup 模块详解

    BeautifulSoup 模块详解 BeautifulSoup是一个模块,该模块用于接收一个HTML或XML字符串,然后将其进行格式化,之后遍可以使用他提供的方法进行快速查找指定元素,从而使得在HT ...

  5. linux 查看和修改文件时间

    参考:https://www.cnblogs.com/chjbbs/p/6437879.html?utm_source=itdadao&utm_medium=referral . 同时修改文件 ...

  6. 关于VS2013下制作和使用静态库和动态库

    关于VS2013下制作和使用静态库和动态库 引言 什么是库:库是写好的现有的,成熟的,可以复用的代码. 所谓静态.动态是指链接.将一个程序编译成可执行程序的步骤: 静态库在链接阶段,会将汇编生成的目标 ...

  7. 我为什么选择Go语言（Golang）

    作为一个以开发为生的程序员,在我心目中编程语言如同战士手里的武器,好与不好主要看使用的人是否趁手.是否适合,没有绝对的高低之分. 从2013年起,学习并使用Golang已经有4年时间了,我想叙述一下我 ...

  8. 永久修改VS include目录

    原文:https://blog.csdn.net/sysprogram/article/details/49214727 VS2008在选项里可以设置全局的Include目录和Lib目录, 但是VS2 ...

  9. newcoder H肥猪（单调队列 / 线段树）题解

    题意: 小B来到了一个异世界,成为了肥猪之王. 在这个异世界,共有n种肥猪,编号分别为1,...,n. 小B希望集齐这n种肥猪. 召集肥猪有两种方式: 1. 花费a[i]的金币召唤一只编号为i的肥猪. ...

  10. 【修改缓存路径】修改Gradle缓存路径的几种方式

    起因 Android Studio的gradle在缓存处理上有时候会莫名其妙的出问题,必要时需要手动删除缓存,然后重新编译.有时也有出于其他考虑指定gradle缓存路径. 方法1:修改gradle文件 ...