Code JS pur pour atteindre l'effet de bulle

Je ne l'expliquerai pas en plus de mots. Permettez-moi de trier les étapes clés pour vous.

Étapes clés:

1. Introduire le fichier JS

 <script type = "text / javascript" src = "js / jquery.min.js"> </ script> <script type = "text / javascript" src = 'js / jQuery.thoughtbubble.js'> </ script>

2. Là où l'effet de bulle est nécessaire

 <div id = 'MainContainer' class = 'contener'> <img src = 'ahout.jpg' id = "thinkBubble" alt = 'quoi de neuf?' /> </div>

3. Utilisez l'effet de bulle

 <script type = "text / javascript"> $ (fenêtre) .ready (function () {$ ('# thinkbubble'). thinkBubble ({text: 'baby, je t'aime', font: 'avinir'});});

4. Il s'agit du code jQuery.ThoughtBubblr.js

 (fonction ($) {$ .fn.ThoughtBubble = fonction (par défaut) {var paramètres = $ .Extend ({backgroundColor: 'White', Fontcolor: 'Black', width: '330px', height: '210px', FonTSize: '15px', bubBLelor: 'White', Speed: 125}, défaut), getBUBBLOR) (contenant), speed: 125}, défaut), getBUBBLOLOR) (contenant), Speed: 125}, défaut), GetBub = contiend) {var offset = Container.offset (), modifiedHeight = offset.top - parseInt (settings.height), style = '"position: absolu; top:' + modifiedHeight + 'px; Left:' + offset.left + 'px; width:' + settings.width + '; high:' + settings. Style = "+ style +"> "+ getMainBubble () + getBubbles () +" </div> "; return bubBleContainer;}, getMainBubble = function () {return '<div> <div>' + getText () + '</div> </ div>';}, getText = function () {return '<Span Style =" Vertical-Align: midd Settings.fontColor + '; Font-Size:' + Settings.fontsize + '; $ (document) .find ('. bubble'), inversed = bubbles.get (). reverse (), speed = settings.speed; $ (inversed [0]). stop (). animate ({opacity: 1}, speed, function () {$ (reversed [1]). Animate ({Opacity: 1}, speed, function () {$ (reversed [2].). 1}, Speed, Function () {$ (inversé [3]). Animate ({Opacity: 1}, Speed, Function () {$ (réinversé [3]). Animate ({Opacity: 1}, Speed);});});});});});}, unanimer = function () {var bubbles = $ (document) .find ('. bubble'); bubbles.stop (). animate ({opacity: 0});}, shiftDiv = function (contener) {var bubbbleholder = $ (document) .find ('. bubble-holder'), précédemment) {var $ this = $ (this), contener = getBubblediv ($ this); $ this.on ('muouseenter', animate); $ this.on ('sourisout', unanimate); $ (window) .on ('redimensi', shiftdiv.bind (this, $ this)); return $ this.parent ().

Ce qui précède partage avec vous les étapes clés de l'effet de bulle JS. Le code est simple et facile à comprendre, donc je n'ai pas écrit trop de description du texte. Si vous avez des questions, laissez-moi un message. L'éditeur répondra à tout le monde à temps. Ici, je voudrais vous remercier pour votre soutien pour le site Web du réseau Wulin!