js氣泡效果，在項(xiàng)目需求中經(jīng)常遇到。今天小編把大概實(shí)現(xiàn)步驟分享到腳本之家平臺(tái)，感興趣的朋友可以參考下

就不給大家多文字說明了。給大家梳理下關(guān)鍵步驟。

關(guān)鍵步驟：

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);

以上給大家分享了js氣泡效果的關(guān)鍵步驟，代碼簡單易懂，就沒給寫過多的文字說明，大家有疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此小編也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！