純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><div>' + 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><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氣泡效果的關鍵步驟，代碼簡單易懂，就沒給寫過多的文字說明，大家有疑問歡迎給我留言，小編會及時回復大家的，在此小編也非常感謝大家對武林網網站的支持！