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