Não vou explicar em mais palavras. Deixe -me resolver as principais etapas para você.
Etapas -chave:
1. Introduzir o arquivo JS
<script type = "text/javascript" src = "js/jquery.min.js"> </script> <script type = "text/javascript" src = 'js/jQuery.thoughtbubble.js'> </sCript>
2. Onde o efeito da bolha é necessário
<div id = 'mainContainer' class = 'contêiner'> <img src = 'AHOUT.jpg' id = "pensamento" alt = 'whats up?' /> </div>
3. Use efeito bolha
<script type = "text/javaScript"> $ (janela) .ready (function () {$ ('#pensamentobubble'). pensamento bobble ({text: 'baby, eu te amo', fonte: 'avinir'});});4. Este é o código jQuery.thoughtbubblr.js
(function ($) {$ .fn.thoughtbubble = function (padrão) {var configurs = $ .extend ({backgroundColor: 'white', fontcolor: 'preto', largura: '330px', altura: '210px', fontsize: '15px', bubblecolor: ' ) {var offset = container.offset (), modificadoHeight = offset.top - parseInt (Settings.Height), style = '"Posição: absoluto; topo:' + modificadoHeight + 'px; esquerda:' + offset.left + 'px; width:' + Settings.width + 'altura:' + Setting.Hest + '; style = " + style +"> " + getMainBubble () + getBubbles () +" </div> "; retorna bubbleContainer;}, getMainBubble = function () {return '<div> <div>' + getText () + '</divid Settings.fontcolor + '; font-size:' + Settings.fontsize + '; $ (documento) .find ('. bubble'), reverso = bubbles.get (). reverse (), speed = Settings.speed; $ (revertido [0]). Stop (). Animate ({Opacity: 1}, velocidade, função () {$ (reversed [1]). Anima ({{Opacity 1} 1}, velocidade, function () {$ (revertida [3]). Animate ({opacidade: 1}, velocidade, function () {$ (revertida [3]). Animate ({opacidade: 1}, speed);});});});});};};}, unanimate = function = function = funcl); $ (document) .find ('. bubble'); bubbles.stop (). Animate ({opacidade: 0});}, shiftDiv = function (contêiner) {var bubbleholder = $ (document) .find ('. {var $ this = $ (this), contêiner = getBubblediv ($ this); $ this.on ('mouseenter', animate); $ this.on ('mouseout', unanimate); $ (janela) .on ('resimessa', shiftDiv.bind (this, $)); retorno $ this.).;Os acima compartilham com você as principais etapas do efeito da bolha JS. O código é simples e fácil de entender, por isso não escrevi muita descrição de texto. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a todos a tempo. Aqui, gostaria de agradecer seu apoio ao site da Wulin Network!