لن أشرح ذلك بمزيد من الكلمات. اسمحوا لي أن فرز الخطوات الرئيسية لك.
الخطوات الرئيسية:
1. تقديم ملف JS
<script type = "text/javaScript" src = "js/jquery.min.js"> </script> <script type = "text/javaScript" src = 'js/jquery.theaughterbble.js'> </script>
2. حيث هناك حاجة إلى تأثير الفقاعة
<div id = 'maincontainer' class = 'container'> <img src = 'ahout.jpg' id = "thinkbubble" alt = 'whats up؟ " /> </div>
3. استخدم تأثير الفقاعة
<script type = "text/javaScript"> $ (window) .Ready (function () {$ ('#thinkbubble'). Thatbubble ({text: 'baby ، i love you' ، font: 'avinir'}) ؛}) ؛4. هذا هو رمز jQuery.TheoughtBubblr.js
(Function ($) {$ .fn.therageBubble = function (defults) {var settings = $ .Extend ({backgroundColor: 'White' ، fontcolor: 'Black' ، width: '330px' ، height: '210px' ، fontsize: '15px' ) {var offset = container.offset () ، modifiedHeight = Offset.top - parseint (Settings.Height) ، style = '"الموضع: المطلق ؛ أعلى: style = " + style +"> " + getMainBubble () + getBubbles () +" </div> " settings.fontcolor + '؛ font-size:' + settings.fontsize + '؛ $ (وثيقة) .find ('. فقاعة') ، عكس = bubbles.get (). revers () ، السرعة = الإعدادات 1} ، السرعة ، الدالة () {$ (عكس [3]). التنشيط ({عظمة: 1} ، السرعة ، الدالة () {$ (عكس [3]). التنشيط ({عتامة: 1} ، السرعة) ؛}) ؛}) ؛}) ؛}) ؛ $ (document) .find ('. bubble') ؛ bubbles.stop (). ANIMATE ({opacity: 0}) ؛} ، shiftDiv = function (container) {var bubbleholder = $ (document) .find ('. {var $ this = $ (this) ، container = getBubblediv ($ this) ؛ $ this.on ('mouseenter' ، animate) ؛ $ this.on ('mouseout' ، unatiaty) ؛ $ (window) .on ('distize' ، shiffdiv.bind (this ، $ this)) ؛ $ this.parent ().يشاركك أعلاه الخطوات الرئيسية لتأثير فقاعة JS. الكود بسيط وسهل الفهم ، لذلك لم أكتب الكثير من وصف النص. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر على الجميع في الوقت المناسب. هنا ، أود أن أشكرك على دعمك لموقع Wulin Network!