web前端|js教程
ToolTip,提示插件
web前端-js教程
继续分享一个我自己写的 ToolTip提示插件，希望大家支持我，给我点评论，哪怕骂我的也好啊，让我知道有人在关注我“小豆” 嘿嘿。废话不多说上代码！
卡通幼儿园网站源码,ubuntu文件如何移动,tomcat关闭服务器端口,用爬虫软件建模,大专php实习去哪个城市好,长沙seo计费lzw
$.fn.ToolTip = function (option) {
var defaults = {
direction: "down",
star: function () { },
from: $(this),
url: ../images/arrow.jpg
};
//方法内基础变量
var opt = $.extend(defaults, option),
dirarray = [up, down, left, ight],
left = 0, top = 0, _left = 0, _top = 0, arrow_w = 15, arrow_h = 60, timeout, arrow = 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),
order-radius: 8px 8px,
ackground-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 = -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，用法很简单的。
源码下载
操作说明是对用户体验师的侮辱！
最新房产erp破解源码,ubuntu下载的命令,网站防爬虫策略,php mhtml,江苏站点seolzw
