分享一个我自己写的ToolTip提示插件(附源码)

继续分享一个我自己写的 ToolTip提示插件，希望大家支持我，给我点评论，哪怕骂我的也好啊，让我知道有人在关注我“小豆” 嘿嘿。废话不多说上代码！复制代码代码如下: $.fn.ToolTip = function (option) { var defaults = { direction: "down", star: function () { }, from: $(this), url: '../images/arrow.png' }; //方法内基础变量 var opt = $.extend(defaults, option), dirarray = ['up', 'down', 'left', 'right'], left = 0, top = 0, _left = 0, _top = 0, arrow_w = 15, arrow_h = 60, timeout, arrow = '0 0'; //开始遍历 $(this).each(function () { var obj = $(this); obj.on({ mouseenter: function () { GetPos(obj); var objtip = $("<div class='tooltip'></div>").css({ position: "absolute", top: top, left: left, border: "solid 1px #ccc", width: $("#" + obj.attr("data-tooltip")).outerWidth(true), height: $("#" + obj.attr("data-tooltip")).outerHeight(true), 'border-radius': '8px 8px', 'background-color': '#fff', 'z-index': 999 }).appendTo(obj); var objtiphead = $("<div></div>").css({ width: arrow_w == 30 ? objtip.outerWidth(true) : 15, height: arrow_h == 30 ? objtip.outerHeight(true) : 15, position: "absolute", top: _top, left: _left }).appendTo(objtip); var objtiparrow = $("<div></div>").css({ width: arrow_w, height: arrow_h, "background-image": "url(" + opt.url + ")", "background-repeat": "no-repeat", "background-position": arrow }).appendTo(objtiphead); objtip.append($("#" + obj.attr("data-tooltip")).clone().show()); objtip.on({ mouseenter: function () { obj.data({ attip: true }); }, mouseleave: function () { $(".tooltip").remove(); obj.removeData("attip"); } }); } , mouseleave: function () { if (!obj.data("attip")) $(".tooltip").remove(); obj.removeData("attip"); } }); }); //得出位置 var GetPos = function (obj) { var objtip = $("#" + obj.attr("data-tooltip")); var tooltippos = { up: function () { arrow_w = 30; arrow_h = 15; top = obj.position().top - 12 - objtip.outerHeight(true); left = obj.position().left; _top = objtip.outerHeight(true); _left = 15; arrow = '-50px -50px'; }, down: function () { arrow_w = 30; arrow_h = 15; top = obj.position().top + 12 + obj.height(); left = obj.position().left; _top = -15; _left = 15; arrow = '-50px 0'; }, right: function () { arrow_w = 15; arrow_h = 30; top = obj.position().top; left = obj.position().left - 12 - objtip.outerWidth(true); _top = 15; _left = objtip.outerWidth(true); arrow = '-80px -20px'; }, left: function () { arrow_w = 15; arrow_h = 30; top = obj.position().top; left = obj.position().left + obj.width() + 12; _top = 15; _left = -15; arrow = '0 -20px'; } }; opt.star(); opt.direction = $.inArray(opt.direction, dirarray) != -1 ? opt.direction : "down"; switch (opt.direction) { case "up": if (obj[0].getBoundingClientRect().top - 10 - objtip.outerHeight() > 0) tooltippos.up(); else tooltippos.down(); break; case "down": if (obj[0].getBoundingClientRect().top + 10 + obj.height() + objtip.outerHeight() < $(window).height()) tooltippos.down(); else tooltippos.up(); break; case "right": if (obj[0].getBoundingClientRect().left - 10 - objtip.outerWidth() > 0) tooltippos.right(); else tooltippos.left(); break; case "left": if (obj[0].getBoundingClientRect().left + obj.width() + 10 + objtip.outerWidth() < $(window).width()) tooltippos.left(); else tooltippos.right(); } } } 经测试，好像IE7 箭头有指向错误，大家可以修改下。小问题啦，洒洒水啦~ 效果图：当然，里面是什么内容，那就要自己创造了，我只是写了一个展示div，用法很简单的。源码下载操作说明是对用户体验师的侮辱！

首先来说，让一个游戏赋有可玩性必须要动静结合。（哈哈，大家以为我要讲作文了。。。但其实我今天要讲的是Javascript）静态的东西谁不会做呢？因为东西一生下来就是静态的（除非你是用的gif动画），所以不需要任何>>>详细阅读

本文标题：分享一个我自己写的ToolTip提示插件(附源码)

地址：http://www.17bianji.com/kaifa2/JS/22465.html

1/2 1