Código JS puro para lograr el efecto de burbuja

No lo explicaré en más palabras. Déjame resolver los pasos clave para ti.

Pasos clave:

1. Introducir archivo JS

 <script type = "text/javaScript" src = "js/jQuery.min.js"> </script> <script type = "text/javaScript" src = 'js/jQuery.thoughtBubble.js'> </script>

2. Donde se necesita efecto de burbuja

 <div id = 'MainContainer' class = 'Container'> <img src = 'ahout.jpg' id = "thoughtBubble" alt = '¿qué pasa?' /> </div>

3. Use el efecto de burbuja

 <script type = "text/javaScript"> $ (ventana) .Ready (function () {$ ('#thoughtbubble'). thoughtBubble ({text: 'baby, te amo', fuente: 'avinir'});});

4. Este es el código jQuery.thoughtbubblr.js

 (function ($) {$ .fn.thoughtBubble = function (defaults) {var settings = $ .extend ({en segundo plano: 'blanco', fontcolor: 'negro', ancho: '330px', altura: '210px', fontsize: '15px', bubblecolor: 'white: speed: 125}, default), get (function (function (function (function', contenedor) {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 + '; class = 'bubble-holder' style = " + style +"> " + getMainBubble () + getBubbles () +" </div> "; return bubbleContainer;}, getMainBubble = function () {return '<iv> <iv>' + getText () + '</div> </div>';}, getTex Middle Color: ' + Settings.FontColor +'; function () {var bubbles = $ (document) .find ('. Bubble'), reversed = bubbles.get (). inversa (), speed = settings.speed; $ (revertido [0]). stop (). Animate ({{{Opacidad: 1}, velocidad, función () {$ (reversado [1]). Animate ({opacity: 1}, velocidad, función () {$ (Reversed [2]). Animate ({Opacity: 1}, Speed, function () {$ (Reversed [3]). Animate ({Opacity: 1}, Speed, function () {$ (Reversed [3]). Animate ({Opacidad: 1}, velocidad);});});});});};},},},); Bubbles = $ (documento) .find ('.. Bubble'); bubbles.stop (). Animate ({Opacity: 0});}, shiftDiv = function (contenedor) {var bubbleholder = $ (document) .find ('. Bubble-Holder'), AnteriorPosition = Container.Offset (). Left; Bubbleholder.CSSS ('Left', Anterior '); function () {var $ this = $ (this), contenedor = getBubbledIv ($ this); $ this.on ('mouseenter', animate); $ this.on ('mouseOut', unanimate); $ (window) .on ('reize', shift.bind (this, $ this); return $.parent ().

El anterior comparte con usted los pasos clave del efecto JS Bubble. El código es simple y fácil de entender, por lo que no he escrito demasiada descripción de texto. Si tiene alguna pregunta, déjame un mensaje. El editor responderá a todos a tiempo. ¡Aquí, me gustaría agradecerle por su apoyo al sitio web de Wulin Network!