ฉันจะไม่อธิบายด้วยคำพูดเพิ่มเติม ให้ฉันจัดเรียงขั้นตอนสำคัญสำหรับคุณ
ขั้นตอนสำคัญ:
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 () {$ ('#ThoughtBubble'). ThoughtBubble ({text: 'ที่รักฉันรักคุณ', แบบอักษร: 'Avinir'});});4. นี่คือ jQuery.thoughtbubblr.js รหัส
(ฟังก์ชั่น ($) {$ .fn.thoughtBubble = ฟังก์ชั่น (ค่าเริ่มต้น) {การตั้งค่า var = $. extend ({backgroundColor: 'White', FontColor: 'Black', ความกว้าง: '330PX', ความสูง: '210PX', FONTSIZE: '15PX' ) {var Offset = container.Offset (), modifiedHeight = Offset.top - ParseInt (การตั้งค่า height), style = '"ตำแหน่ง: Absolute; top:' + modifiedHeight + 'px; ซ้าย:' ffset.left + 'px; class = 'bubble-holder' style = " + style +"> " + getMainBubble () + getBubbles () +" </div> "; return bubbleContainer;}, getMainBubble = function () {return '<div> <div> Middle; สี: ' + การตั้งค่า FontColor +'; Font-Size: ' + Settings.FontSize +'; Bubbles = $ (เอกสาร) .find ('. Bubble'), ย้อนกลับ = bubbles.get (). reverse (), speed = การตั้งค่า. speed; $ (กลับกัน [0]). หยุด () antiime ({opacity: 1}, ความเร็ว, ฟังก์ชัน () {$ (ย้อนกลับ [2]). animate ({ความทึบ: 1}, ความเร็ว, ฟังก์ชัน () {$ (ย้อนกลับ [3]). animate ({ความทึบ: 1}, ความเร็ว, ฟังก์ชัน () {$ (กลับกัน [3]). Bubbles = $ (เอกสาร) .find ('. Bubble'); bubbles.stop (). animate ({ความทึบ: 0});}, shiftdiv = ฟังก์ชั่น (คอนเทนเนอร์) {var bubbleholder = $ (เอกสาร) .find ('. preventposition);}; return this.each (function () {var $ this = $ (this), container = getBubblediv ($ this); $ this.on ('Mouseenter', animate); $ this.on ('mouseout', unanimate); $ (หน้าต่าง) $ this.parent (). prepend (คอนเทนเนอร์);});};}) (jQuery);แบ่งปันขั้นตอนสำคัญของเอฟเฟกต์ฟอง JS กับคุณ รหัสนั้นง่ายและเข้าใจง่ายดังนั้นฉันจึงไม่ได้เขียนคำอธิบายข้อความมากเกินไป หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับทุกคนในเวลา ที่นี่ฉันขอขอบคุณสำหรับการสนับสนุนเว็บไซต์ Wulin Network!