jquery气泡提示效果

效果改自:http://inezha.com/p/7797945/item737

代码注释已经尽可能的详细了,也不多说了.

越用jquery就越喜欢用它...

bubble.js:

/*
 *    @date: 2010-5-30 11:57:22
 *    @author: 胡灵伟
 *    Depends:
 *        jquery.js
 *
 *    function:气泡提示效果
 *    use:$("selectors").bubble({fn:getdata, 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,
             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 =  $('<div class="bubble-popup"></div>').append('<div class="topleft"></div>').append('<div class="top"></div>')
                .append($('<div class="topright"></div>')).append('<div class="left"></div>')
                .append('<div class="contents"></div>').append('<div class="right"></div>')
                .append('<div class="bottomleft"></div>')
                .append($('<div class="bottom"></div>')
                        .append($('<div class="bottomtail"></div>')))
                 .append('<div class="bottomright"></div>').appendTo('body');
　　　　　tpl.width(w + 38);
                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){
                //此处的options为每次调用add方法传进来的参数,比如指定获取数据的方法fn, 气泡宽width高height
                //console.debug("length:"+triggers.length);
                var t = this.trigger.length;
                //将新加入的需要气泡提示效果的对象放到trigger数组中
                for(var j =0;j<triggers.length;j++) 
                    this.trigger.push(triggers[j]);
                //console.debug("trigger.length:" + this.trigger.length);
                var hout = this.handleout;
                var hover = this.handleover;
                var obj = this;
                //为新加入的对象绑定鼠标监听事件
                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);
                //当新触发冒气泡事件时原先的定时器还没结束则将原来的定时器清除
                if (obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]);
                if (obj.beingShown[i] || obj.shown[i]) {
                    //如果气泡正在冒或已经冒出来了则不再重复冒气泡
                    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(),
                        left: 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',
                        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]);
                    //处理当因为某些意外操作使得没有触发鼠标进入事件而直接再次触发鼠标离开事件时的情况
                    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//渐隐效果
                        }, 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();//单例
        $.bubble.add(this, options);
        };
    })(jQuery);

用到的样式:

<style type="text/css" media="screen">
    <!--
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 10px;
        }
        
        h1 {
            margin: 14px 0;
            font-family: 'Trebuchet MS', Helvetica;
        }
        
        .bubbletrigger {
        }

        /* Bubble pop-up */
.bubble-popup {
    position: absolute;
    display: none;
    z-index: 50;
    border-collapse: collapse;
}
.bubble-popup .topleft {
    width: 19px;
    height: 15px;
    float:left;
    background-image: url(../images/bubble/bubble-1.png);
    /*解决ie6PNG背景透明bug*/
    _background-image:none; /* IE6 */
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src='images/bubble/bubble-1.png'); /* IE6 */
}



.bubble-popup .top {
    width: 100px;
    height: 15px;
    float:left;
    background-image: url(../images/bubble/bubble-2.png);
    /*解决ie6PNG背景透明bug*/
    _background-image:none; /* IE6 */
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bubble/bubble-2.png'); /* IE6 */
}

.bubble-popup .topright {
    width: 19px;
    height: 15px;
    float:left;
    background-image: url(../images/bubble/bubble-3.png);
    /*解决ie6PNG背景透明bug*/
    _background-image:none; /* IE6 */
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src='images/bubble/bubble-3.png'); /* IE6 */
}

.bubble-popup .left {
    clear: left;
    width: 19px;
    height: 30px;
    float:left;
    background-image: url(../images/bubble/bubble-4.png);
    /*解决ie6PNG背景透明bug*/
    _background-image:none; /* IE6 */
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bubble/bubble-4.png'); /* IE6 */
}

.bubble-popup .contents {
    white-space: normal;
    word-break: break-all;
    float:left;
    font-size: 12px;
    line-height: 1.2em;
    background-color: #fff;
    color: #66BDED;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
        sans-serif;
}

.bubble-popup .right {
    width: 19px;
    height: 30px;
    float:left;
    background-image: url(../images/bubble/bubble-5.png);
    /*解决ie6PNG背景透明bug*/
    _background-image:none; /* IE6 */
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bubble/bubble-5.png'); /* IE6 */
}

.bubble-popup .bottomleft {
    clear: left;
    width: 19px;
    height: 15px;
    float:left;
    background-image: url(../images/bubble/bubble-6.png);
    /*解决ie6PNG背景透明bug*/
    _background-image:none; /* IE6 */
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src='images/bubble/bubble-6.png'); /* IE6 */
}

.bubble-popup .bottom {
    width: 100px;
    height: 15px;
    float:left;
    background-image: url(../images/bubble/bubble-7.png);
    /*解决ie6PNG背景透明bug*/
    _background-image:none; /* IE6 */
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bubble/bubble-7.png'); /* IE6 */
    text-align: center;
}

.bubble-popup .bottomtail {
    width: 30px;
    height: 29px;
    margin: 0 auto;
    display:block;
    background-image: url(../images/bubble/bubble-tail2.png);
    /*解决ie6PNG背景透明bug*/
    _background-image:none; /* IE6 */
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src='images/bubble/bubble-tail2.png'); /* IE6 */
}

.bubble-popup .bottomright {
    width: 19px;
    height: 15px;
    float:left;
    background-image: url(../images/bubble/bubble-8.png);
    /*解决ie6PNG背景透明bug*/
    _background-image:none; /* IE6 */
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src='images/bubble/bubble-8.png'); /* IE6 */
}

    -->
    </style>

使用方法:(用到的图片样式img.zip,注意路径,没图片是很难看的...)

    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../js/bubble-1.0.js" type="text/javascript"></script>
    <script type="text/javascript"><!--
    aa = function(obj, callback){
        $.ajax({
            type : 'POST',
            data : {word:$(obj).attr('alt'),rand:Math.random()},
            url : 'http://localhost/xun/ajax.svl?method=getdetailinfo',
            dataType : 'text',
            timeout : 1000,
            success : function(data){
                        callback(data);
                      }
         });
    };
    bb = function(obj, callback){
        $.ajax({
            type : 'POST',
            data : {word:$(obj).attr('alt'),rand:Math.random()},
            url : 'http://localhost/xun/ajax.svl?method=getdetailinfo',
            dataType : 'text',
            timeout : 1000,
            success : function(data){
                        callback(data + "aaaa");
                      }
         });
    };
    $(function(){
        $('.bubbletrigger').bubble({150, height: 100, fn:aa});
        $('#a').bubble({fn:bb});
    });
    //
    --></script>
</head>
<body id="page">



    <h1>jQuery Bubble Example</h1>
    <div>
    <br/>aaaaaaaaaa
    <br/>aaaaaaaaaaaaaaaaaaaa
    <br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaa
    <br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    <br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    <br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div style="padding-left:100px;">
            <img class="bubbletrigger" alt="a" src="../images/bubble/starburst.gif" />

            <img class="bubbletrigger" alt="b" src="../images/bubble/starburst.gif" />

            <img class="bubbletrigger" alt="c" src="../images/bubble/starburst.gif" />

            <img class="bubbletrigger"  alt="d" src="../images/bubble/starburst.gif" />

            <img id="a"  alt="e" src="../images/bubble/starburst.gif" />
    </div>

</body>

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