关键步骤：
1、引入js文件
2、在需要使用气泡效果的地方
3、使用气泡效果
$(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 = + getmainbubble() + getbubbles() +
;return bubblecontainer;},getmainbubble = function() {return '' + gettext() + '
';},gettext = function() {return '' + settings.text + '';},getbubbles = function() {return '
';},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气泡效果的关键步骤，代码简单易懂，就没给写过多的文字说明，大家有疑问欢迎给我留言，小编会及时回复大家的，在此小编也非常感谢大家对脚本之家网站的支持！