バブル効果を達成するための純粋な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（）{$（ '＃shoughtbubble'）。思考bubble（{text： 'baby、love you'、font： 'avinir'}）;}）;

4.これはjquery.thoughtbubblr.jsコードです

（function（$）{$ .fn.thoughtbubble = function（defaults）{var settings = $ .extend（{backgroundcolor： 'white'、fontcolor： 'black'、width： '330px'、height： '210px'、fontsize： '15px'、bubblecolor： 'white：centerented） {var offset = container.offset（）、modifiedheight = offset.top -parseint（settings.height）、style = '"position：absolute; top：' + modifiedheight + 'px; left：' + offset.px; width： ' + settings.width +'; height.heighight + class = 'bubble-holder' style = " + style +"> " + getmainbubble（） + getBubbles（） +" </div> "; return bubblecontainer;}、getmainbubble = function（）{return '<div> <div>' + getText（） + '</div> </div> style = "vertical-align：middle; color： ' + settings.fontcolor +'; font-size： ' + settings.fontsize +'; font-family： ' + settings.font +'"> ' + settings.text +' </span> ';}、return = function（）{{return '<div> <div> div> <div> </div> <div> </div>';}、animate = function（）{var bubbles = $（document）.find（ '。バブル'）、逆= bubbles.get（）。 {$（voversed [1]）。animate（{opacity：1}、speed、function（）{$（voversed [2]）。animate（{ofacity：1}、speed、function（）{$（voversed [3]）。 speed）;}）;}）;}）;}）;}以前のposition = container.offset（）。左; bubbleholder.css（ 'left'、fortionposition）;}; return this.each（function（）{var $ this = $（this）、container = getbubblediv（$ this）; $ this.on（ 'mouseenter'、amainate）; $ this.on（ 'mouseout'）; shiftdiv.bind（this、$ this））; return $ this.parent（）。prepend（container）;};};}）（jquery）;

上記は、JSバブル効果の重要なステップを共有しています。コードはシンプルで理解しやすいので、テキストの説明をあまり書きませんでした。ご不明な点がございましたら、メッセージを残してください。編集者は、すべての人に時間内に返信します。ここで、Wulin NetworkのWebサイトへのご支援に感謝します！