Heim > Web-Frontend > js-Tutorial > 分享一个我自己写的ToolTip提示插件(附源码)_jquery

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

WBOY
Freigeben: 2016-05-16 17:43:14
Original
1170 Leute haben es durchsucht

继续分享一个我自己写的 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 = $("
").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 = $("
").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 = $("
").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() 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() tooltippos.left();
else
tooltippos.right();
}
}
}

经测试,好像IE7 箭头有指向错误,大家可以修改下。小问题啦,洒洒水啦~
效果图
分享一个我自己写的ToolTip提示插件(附源码)_jquery 
当然,里面是什么内容,那就要自己创造了,我只是写了一个展示div,用法很简单的。
源码下载
操作说明是对用户体验师的侮辱!
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage