Ich werde es nicht in mehr Worten erklären. Lassen Sie mich die wichtigsten Schritte für Sie aussortieren.
Schlüsselschritte:
1. Einführung der JS -Datei
<script type = "text/javaScript" src = "js/jquery.min.js"> </script> <script type = "text/javascript" src = 'js/jquery.thoughtbubble.js'> </script>
2. Wo Blaseneffekt benötigt wird
<div id = 'maincontainer' class = 'container'> <img src = 'ahout.jpg' id = "thoughtbubble" alt = 'was ist los?' /> </div>
3.. Bubble Effect verwenden
<script type = "text/javaScript"> $ (Fenster) .Ready (function () {$ ('#thoughtbubble'). thodenbubble ({text: 'baby, ich liebe dich', font: 'avinir'});});V.
(function($) {$.fn.thoughtBubble = function( defaults ) {var settings = $.extend({backgroundColor: 'white',fontColor: 'black',width: '330px',height: '210px',fontSize: '15px',bubbleColor: 'white',speed: 125}, defaults ),getBubbleDiv = function( container ) {var offset = container.Offset (), modifiedHeight = offset.top - parseInt (Setting.Height), style = '"Position: Absolute; ober:' + modifiedHeight + 'px; links' + offset.left + 'px; Breite:' + Setting.Width + '; style = " + style +"> " + getMainbubble () + getBubbles () +" </div> "; return bubblecontainer;}, getMainbubble = function () {return '<div> <div>' + getText () + '</div> </div>; Einstellungen.FontColor + '; Schriftgröße:' + Einstellungen.Fontsize + '; $ (dokument) .find ('. bubble'), reversed = bubbles.get (). Reverse (), Speed = Settings.Speed; $ (umgekehrt [0]). Stop (). Animate ({Opazität: 1}, Geschwindigkeit, Funktion () {$ $ (umgekehrt [1]. Geschwindigkeit, Funktion () {$ (umgekehrt [3]). Animate ({Opazität: 1}, Geschwindigkeit, Funktion () {$ (umgekehrt [3]). Animate ({opazität: 1}, Geschwindigkeit);});});});});}; $ (dokument) .find ('. bubble'); Bubbles.stop (). Animate ({Opazität: 0});}, ShiftDiv = Funktion (Container) {var bubbledeholder = $ (document) .find ('. Bubble-Halter'), Vorvorposition = container.offset (). {var $ this = $ (this), container = getBubblediv ($ this); $ this.on ('mouseenter', animim); $ this.on ('mouseout', unanimate);Die obige Weitergabe mit Ihnen die wichtigsten Schritte des JS -Bubble -Effekts. Der Code ist einfach und leicht zu verstehen, daher habe ich nicht zu viel Textbeschreibung geschrieben. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird alle rechtzeitig antworten. Hier möchte ich Ihnen für Ihre Unterstützung für die Wulin Network -Website danken!