jquery_jquery를 기반으로 한 버블 프롬프트 효과

코드 주석은 최대한 자세히 설명하였으므로 더 이상 말하지 않겠습니다.
예비 테스트에서는 큰 버그가 발견되지 않았습니다. 일반적으로 마우스가 움직이고 트리거되는 경우에는 만족스럽지 않습니다. 버블이 발생하면 XX가 비어있는지 아닌지 개체 문제로 나오네요,
효과에는 영향이 없지만 IE 왼쪽 하단에 노란색 경고가 뜨는게 짜증나고 어떻게 개선해야할지 모르겠습니다. 일단 문제를 해결하기 위해 try/catch를 추가했습니다...
또한 기본적으로 트리거 개체에 거품이 나타납니다. 바로 위에 트리거 개체가 가장자리에 있으면 거품의 일부가 외부에 나타납니다. 창... 혹시 이 경우에는 버블이 왼쪽이나 오른쪽으로 표시될 수도 있는데 좀 번거로울 것 같아서 안 했는데요...
그 jquery를 많이 사용할수록 더 좋아집니다...
bubble.js:

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

/*
* @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; .add = function(triggers, options){
//여기에 있는 옵션은 add 메소드가 호출될 때마다 전달되는 매개변수입니다. 예를 들어 데이터를 얻기 위한 fn 메소드 지정, 버블 너비 너비 및 높이
//console.debug("length:" Triggers.length);
var t = this.trigger.length;//거품 프롬프트 효과가 필요한 새로 추가된 개체를 트리거 배열에 넣습니다. 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;//새로 추가된 객체에 대한 마우스 수신 이벤트 바인딩
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)
//버블 이벤트가 새로 트리거되고 원래 타이머가 종료되지 않은 경우 원래 타이머는
if (obj.hideDelayTimer[i])clearTimeout(obj.hideDelayTimer[i])
if (obj.beingShown[i] || obj.shown[i]) {
/ /if bubble 거품이 팝업 중이거나 이미 팝업된 경우 거품은 다시 팝업되지 않습니다.
return
} else {
var Trigger = $(obj.trigger[i]); >//마커 버블이 나타납니다
obj.beingShown[i] = true;
//버블 만들기
obj.popup[i] = obj.makebubble(options.width||obj.options. width, options.height||obj .options.height)
//마우스가 트리거 개체를 떠나 버블 위에 놓일 때 버블이 사라지지 않도록 버블에 대해 동일한 이벤트를 바인딩합니다.
obj .popup[i].mouseover(function(){ obj.handleover(i, obj)}).mouseout(function(){obj.handleout(i, obj)})
//fn 메소드를 호출하여 데이터를 얻어서 데이터를 표시합니다
obj.options.fn (obj.trigger[i], function(data){
obj.popup[i].find('.contents').text(data);
});
//거품 설정 거품의 위치 및 표시 속성은 기본적으로 트리거 객체 바로 위에 나타납니다.
obj.popup[i].css({
top: Trigger.offset ().top-obj.popup[i].height() ,
왼쪽: Trigger.offset().left Trigger.width()/2 - obj.popup[i].width()/2,
display: 'block'
}).animate(
//사악한 IE는 PNG 반투명성과 필터를 동시에 지원할 수 없으므로 IE에서는 필터가 사용되지 않습니다
$.browser.msie? {
top: '-=' obj.options.distance 'px'
}:{
top: '-=' obj.options.distance 'px',
불투명도: 1
}, obj.options.time, 'swing', function( ) {
obj.beingShown[i] = false;
obj.shown[i] =
}); }
return false;
};
this.handleout = function(i, obj, options){
//console.debug("hideDelayTimer[" i "]:" obj.hideDelayTimer[ i]);//일부 사고로 인한 처리 마우스 입력 이벤트가 발생하지 않고 마우스 떠나기 이벤트가 직접 다시 발생하는 동작입니다
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',
불투명도: 0//페이드 효과
} , obj.options.time, 'swing', function () {
obj.shown[i] =
obj.popup; [i].css('display', 'none');
obj.popup[i] = null
});}catch(e){}}, obj.options. hideDelay);
return false;
};
$.bubble = new Bubble();//단일 인스턴스
$.bubble.add(this, options); 🎜>};
})(jQuery);


사용 지침: (사용된 이미지 스타일은 img.zip입니다. 경로에 주의하세요. 사진이 없으면 보기에 좋지 않습니다.. .)




코드 복사


코드는 다음과 같습니다.

jQuery 버블 예제

aaaaaaaaaa

aaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaa aaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

서블릿은 只要返回一段字符串就可以了,就不贴了.