나는 그것을 더 많은 단어로 설명하지 않을 것입니다. 주요 단계를 정리하겠습니다.
주요 단계 :
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 = "khoughbble"alt = 'Whats Up?' /> </div>
3. 버블 효과를 사용하십시오
<script type = "text/javaScript"> $ (wind
4. 이것은 jQuery.thoughtbubblr.js 코드입니다
(function ($) {$ .fn.ThoughtBubble = function (defaults) {var settings = $ .Extend ({backgroundColor : 'White', fontColor : 'black', 너비 : '330px', 높이 : '210px', fontsize : '15px', bubblecolor : 'forts', defaubled} 컨테이너) {var offset = container.offset (), modifiedHeight = offset.top -parseint (settings.weight), style = ' "위치 : 절대; 상단 :' + modifiedHeight + 'px; left.left.left.left +'px; width : ' + settings.width +' ' class = 'bubble-Holder'Style = " + style +"> " + getMainBubble () + getBubbles () +"</div> "; return bubblecontainer;}, getMainBubble = function () {return '<div> <div>' + getText () + '</div>'; 중간; ' + settings.fontcolor +'; font-size : ' + settings.fontsize +'; ' + settings.font +' "> ' + settings.text +'</span> ';} $ (document) .find ( '. bubble'), reversed = bubbles.get (). reverse (), spevers (), speed = settings.speed; $ (Reversed [0]). spop (). 애니메이션 ({불투명도 : 1}, 속도, 함수 () {$ (Reversed [1]). 애니메이션 ({불투명도 : 1}, function () {$ (reversed [2)). 1}, 속도, function () {$ [3]). 애니메이션 ({불투명도 : 1}, 속도, function () {$ (Reversed [3]). 애니메이션 ({불투명 : 1}, 속도);});});});}); $ (document) .find ( '. bubble'); bubbles.stop (). 애니메이션 ({opcacity : 0});}, shiftDiv = 함수 (컨테이너) {var bubbleholder = $ (document) .find ( '. bubble-holder'), previousPosition = container.offset (). left; $ this = $ (this), 컨테이너 = getBubbleV ($ this); $ this.on ( '마우스 엔터', 애니메이션); $ this.on ( '마우스 아웃', 비정상); $ (창) ( 'resize', shiftDiv.bind (this, $ this)); return $ this.parent (). prepend (컨테이너);} (});});위의 내용은 JS 버블 효과의 주요 단계를 공유합니다. 코드는 간단하고 이해하기 쉽기 때문에 텍스트 설명을 너무 많이 쓰지 않았습니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 모든 사람에게 답장을합니다. Wulin Network 웹 사이트에 대한 귀하의 지원에 감사드립니다!