就不给大家多文字说明了。给大家梳理下关键步骤。

关键步骤：

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'> <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>" + getMainBubble() + getBubbles() + "</div>"; return bubbleContainer; }, getMainBubble = function() { return '<div><div>' + getText() + '</div></div>'; }, getText = function() { return '<span + settings.fontColor + ';font-size: ' + settings.fontSize + '; font-family: ' + settings.font + '">' + settings.text + '</span>'; }, getBubbles = function() { return '<div><div></div><div></div><div></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);

以上给大家分享了js气泡效果的关键步骤，代码简单易懂，就没给写过多的文字说明，大家有疑问欢迎给我留言，小编会及时回复大家的，在此小编也非常感谢大家对查字典教程网的支持！

【纯JS代码实现气泡效果】相关文章：

★ JS动画效果打开、关闭层的实现方法

★ JS+CSS实现的拖动分页效果实例

★ 基于jquery实现下拉框美化特效

★ JavaScript实现鼠标点击后层展开效果的方法

★ Jquery注册事件实现方法

★ JavaScript实现鼠标拖动效果的方法

★ 解密效果

★ JS代码混淆初步

★ jQuery的Scrollify插件实现滑动到页面下一节点

★ JavaScript实现广告的关闭与显示效果实例