Pure JS code realizes bubble effect _javascript skill

I will not give you more text description. We'll comb through the key steps.

Key steps:

1, the introduction of JS files

<script type= "Text/javascript" src= "js/jquery.min.js" ></script>
<script type= "Text/javascript" Src= ' Js/jquery.thoughtbubble.js ' ></script>

2, where you need to use the bubble effect

<div id= ' maincontainer ' class= ' container ' > 
</div>

3, the use of bubble effect

<script type= "Text/javascript" >
$ (window). Ready (function () {
$ (' #thoughtBubble '). Thoughtbubble ({
text: ' Baby,i love for You ',
font: ' Avenir '
}
);

4, this is Jquery.thoughtBubblr.js code

(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), Styl E = ' "Position:absolute; Top: ' + modifiedheight + ' px; Left: ' + offset.left + ' px; Width: ' + settings.width + '; Height: ' + settings.height + '; ', Bubblecontainer = ' <div class= ' bubble-holder ' style= ' + style + ' > ' + Getmainbubb
Le () + getbubbles () + "</div>";
return bubblecontainer; }, getmainbubble = function () {return ' <div class= ' main-bubble-holder ' ><div class= ' bubble main-bubble ' > ' + G
Ettext () + ' </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 ' &GT;&L T;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.S
peed; $ (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 (). lef
T
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);

Above to share the JS bubble effect of the key steps, the code is easy to understand, did not write too much text, we have questions welcome to my message, small series will promptly reply to everyone, in this small series also thank you for your support cloud Habitat community site!