Bubble prompt effect based on jquery_jquery

The code comments have been as detailed as possible, so I won’t say much more.
No major BUG has been found in the preliminary test. Generally speaking, I am not satisfied with it. When the mouse moves around and triggers bubbles, it will appear that XX is empty or not. Object problem,
Although it does not affect the effect, I am annoyed by the yellow warning in the lower left corner of IE, and I don’t know how to improve it for the time being. Added try/catch to solve it...
Also, bubbles appear in the trigger object by default Right above the , when the trigger object is on the edge, part of the bubble will appear outside the window... Maybe in this case, the bubble can be displayed on the left or right. I felt it might be a bit troublesome, so I didn't do it. Yeah, I’m lazy...
The more I use jquery, the more I like using it...
bubble.js:

Copy code The code is as follows:

/*
* @date: 2010-5-30 11:57:22
* @author: 胡灵伟
* Depends:
* jquery.js
*
* function:气泡提示效果
* use:$("selectors").bubble({fn:getdata, width:width, height:height});
* 对所有需要气泡提示效果的对象使用bubble方法，
* fn为气泡中显示内容获得方法,即fn中返回的数据会显示在气泡中
* 以样式指代div则有:
* width\height为contents的width\height属性
* 气泡总width为left.width + contents.width + right.width
* 气泡总height为top.height + contents.height + bottom.height
*/
(function ($) {
$.fn.bubble = function (options) {
Bubble = function(){
this.defaults = {
distance : 10,
time : 250,
hideDelay : 500,
width:100,
height:100
};
this.options = $.extend(this.defaults, options);
this.hideDelayTimer = new Array();
this.shown = new Array();
this.beingShown = new Array();
this.popup = new Array();
this.trigger = new Array();
this.makebubble = function(w, h){
var tpl = $('

').append('

').append('

')
.append($('

')).append('

')
.append('

').append('

')
.append('

')
.append($('

')
.append($('

')))
.append('

').appendTo('body');
tpl.find('.left, .right, .contents').each(function(){$(this).height(h)});
tpl.find('.top, .bottom, .contents').each(function(){$(this).width(w)});
return tpl;
};
this .add = function(triggers, options){
//The options here are the parameters passed in each time the add method is called, such as specifying the method fn to obtain data, the bubble width width and height
//console. debug("length:" triggers.length);
var t = this.trigger.length;
//Put the newly added object that needs the bubble prompt effect into the trigger array
for(var j =0;jthis.trigger.push(triggers[j]);
//console.debug("trigger.length:" this.trigger.length);
var hout = this.handleout;
var hover = this.handleover;
var obj = this;
//Bind mouse listening events for newly added objects
triggers.each(function( ind){
$(this).unbind('mouseover').mouseover(function(){
hover(t ind, obj, options);
}).unbind('mouseout'). mouseout(function(){
hout(t ind, obj, options);
});
});
};
this.handleover = function(i, obj, options ){
//console.debug("hideDelayTimer.length:" obj.hideDelayTimer.length);
//When the bubble event is newly triggered and the original timer has not ended, the original timer will be cleared.
if (obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]);
if (obj.beingShown[i] || obj.shown[i]) {
//if bubble If bubbles are popping up or have already popped up, the bubbles will not pop up again
return;
} else {
var trigger = $(obj.trigger[i]);
//Mark bubbles are popping up
obj.beingShown[i] = true;
//Create bubble
obj.popup[i] = obj.makebubble(options.width||obj.options.width, options.height||obj .options.height);
//Bind the same event for the bubble so that the bubble will not disappear when the mouse leaves the trigger object and is placed on the bubble
obj.popup[i].mouseover(function(){ obj.handleover(i, obj)}).mouseout(function(){obj.handleout(i, obj)});
//Call the method fn to obtain data to display the data
obj.options.fn (obj.trigger[i], function(data){
obj.popup[i].find('.contents').text(data);
});
//Set bubbles The position and display properties of the bubble appear directly above the trigger object by default
obj.popup[i].css({
top: trigger.offset().top-obj.popup[i].height() ,
left: trigger.offset().left trigger.width()/2 - obj.popup[i].width()/2,
display: 'block'
}).animate(
//Since the evil IE cannot support PNG translucency and filters at the same time, filters are not used for IE
$.browser.msie?{
top: '-=' obj.options.distance 'px'
}:{
top: '-=' obj.options.distance 'px',
opacity: 1
}, obj.options.time, 'swing', function( ) {
obj.beingShown[i] = false;
obj.shown[i] = true;
});
}
return false;
};
this.handleout = function(i, obj, options){
//console.debug("hideDelayTimer[" i "]:" obj.hideDelayTimer[i]);
//Handling due to some accidents The operation is such that the mouse enter event is not triggered but the mouse leave event is directly triggered again
if (obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]);
obj.hideDelayTimer[i] = setTimeout (function () {
obj.hideDelayTimer[i] = null;
try{
　　　obj.popup[i].animate(
$.browser.msie?{
top: ' -=' obj.options.distance 'px'
}:{
top: '-=' obj.options.distance 'px',
opacity: 0//Fade effect
} , obj.options.time, 'swing', function () {
obj.shown[i] = false;
obj.popup[i].css('display', 'none');
obj.popup[i] = null;
});}catch(e){};
}, obj.options.hideDelay);
return false;
};
};
$.bubble = new Bubble();//Single instance
$.bubble.add(this, options);
};
})(jQuery);

Instructions for use: (The image style used is img.zip, pay attention to the path, it will be ugly without pictures...)

Copy code The code is as follows:

jQuery Bubble Example

aaaaaaaaaa

aaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

servlet只要返回一段字符串就可以了,就不贴了.