js实现气泡效果

关键步骤：

1、引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src='js/jquery.thoughtBubble.js'></script>

2、在需要使用气泡效果的地方

<div id='mainContainer' class='container'>
   <img src='ahout.JPG' id="thoughtBubble" alt='whats up?' />
</div>

3、使用气泡效果

<script type="text/javascript">
$(window).ready( function() {

   $('#thoughtBubble').thoughtBubble({
      text: 'baby,I love you',
      font: 'avenir'

   });

});

4、这是jquery.thoughtBubblr.js代码

(function($) {

$.fn.thoughtBubble = function( defaults ) {

    var settings = $.extend({

        backgroundColor: 'white',
        fontColor: 'black',
        width: '330px',
        height: '210px',
        fontSize: '15px',
        bubbleColor: 'white',
        speed: 125
        
        }, defaults ),

    getBubbleDiv = function( container ) {

        var offset = container.offset(),
            modifiedHeight = offset.top - parseInt( settings.height ),
            style = '"position: absolute; top:' + modifiedHeight + 'px; left:' + offset.left + 'px ; width:' + settings.width + '; height:' + settings.height + ';"',
            bubbleContainer = "<div class='bubble-holder' style=" + style + ">" + getMainBubble() + getBubbles() + "</div>";

        return bubbleContainer;

    },

    getMainBubble = function() {

        return '<div class="main-bubble-holder"><div class="bubble main-bubble">' + getText() + '</div></div>';

    },

    getText = function() {

        return '<span style="vertical-align: middle; color: ' + settings.fontColor + ';font-size: ' + settings.fontSize + '; font-family: ' + settings.font + '">' + settings.text + '</span>';

    },

    getBubbles = function() {

        return '<div class="sm-bubble-holder"><div class="bubble bubbleLg"></div><div class="bubble bubbleMd"></div><div class="bubble bubbleSm"></div></div>';
    },

    animate = function(){

        var bubbles = $(document).find('.bubble'),
            reversed = bubbles.get().reverse(),
            speed = settings.speed;
        
        $(reversed[0]).stop().animate({ opacity: 1}, speed, function() {
            $(reversed[1]).animate({ opacity: 1}, speed, function() {
                $(reversed[2]).animate({ opacity: 1}, speed, function() {
                    $(reversed[3]).animate({ opacity: 1},speed);
                });
            });
        });

    },

    unanimate = function() {

        var bubbles = $(document).find('.bubble');

        bubbles.stop().animate({opacity: 0});

    },

    shiftDiv = function( container ) {

        var bubbleHolder = $(document).find('.bubble-holder'),
            previousPosition = container.offset().left;

        bubbleHolder.css('left', previousPosition);
    };

    return this.each( function() {

        var $this = $(this),
            container = getBubbleDiv( $this );

        $this.on('mouseenter', animate );

        $this.on('mouseout', unanimate );

        $(window).on('resize', shiftDiv.bind(this, $this) );

        return $this.parent().prepend(container);

    });
    

};

})(jQuery);

转载于:https://www.cnblogs.com/hcxl/p/8321553.html