/**
|
* @name jquery freeTip
|
* @function 更改html标签的title提示样式，使之更友好，对ie8、FF3.6、360 3.9支持较好（提示框可随鼠标左右移动），
|
* 在ie6、7下支持有待改善
|
*
|
* @date 2011.7.30
|
* @author zhifeichuan
|
*
|
* @version 1.0
|
*
|
* 欢迎大家指出错误、提出建议
|
*/
|
(function ($) {
|
$.fn.freeTip = function (options) {
|
var defaults = {
|
cssClass: "freeTip", //提示框类样式
|
sanJiaoClass: "sanJiaoTip" //提示框下的三角类样式
|
}
|
|
var options = $.extend(defaults, options);
|
var $o = this; //目标
|
var $tip = $("<div id='freeTip' style='display:none;'></div>"); //提示框对象
|
var $sanJiao = $("<div id='sanJiaoTip' style='display:none;'></div>"); //提示框下的三角对象
|
|
//设置提示框的样式
|
$tip.html($o.attr("title"));
|
$tip.addClass(options.cssClass);
|
$sanJiao.addClass(options.sanJiaoClass);
|
$o.attr("title", "");
|
|
//添加到文档中
|
$("body").append($tip);
|
$("body").append($sanJiao);
|
|
|
|
$o.bind("mousemove", function (e) {
|
var _e = e;
|
$tip.show();
|
$sanJiao.show();
|
creatTip(_e);
|
|
});
|
|
$o.bind("mouseout", function () {
|
$tip.hide();
|
$sanJiao.hide();
|
});
|
|
|
//提示框定位
|
var creatTip = function (e) {
|
var mouse = new Mouse(e);
|
|
//在ie6、7中，三角下会出现白色区域，通过设置提示框的位置解决此问题
|
if (getVersion() != "IE6" && getVersion() != "IE7") {
|
$tip.css("left", mouse.mouseX);
|
} else {
|
$tip.css("left", $o.position().left + 35);
|
}
|
|
$tip.css("top", $o.position().top - $tip.outerHeight());
|
creatSanJiao();
|
}
|
|
//三角定位
|
var creatSanJiao = function () {
|
$sanJiao.css("top", $tip.position().top + $tip.outerHeight() + "px");
|
$sanJiao.css("left", $tip.position().left + 10 + "px");
|
}
|
|
|
var Mouse = function (e) {
|
var mouseEvent = new MouseEvent(e);
|
this.mouseX = mouseEvent.x;
|
this.mouseY = mouseEvent.y - $tip.height();
|
}
|
|
//鼠标坐标
|
var MouseEvent = function (e) {
|
this.x = e.pageX;
|
this.y = e.pageY;
|
}
|
|
//浏览器判断
|
var getVersion = function () {
|
if ($.browser.msie && ($.browser.version == "6.0")) {
|
return "IE6";
|
} else if ($.browser.msie && ($.browser.version == "7.0")) {
|
return "IE7";
|
}
|
return "";
|
}
|
}
|
})(jQuery);
|
