Kod JS tulen untuk mencapai kemahiran bubble effect_javascript

Saya tidak akan memberikan penjelasan teks lagi. Biar saya ringkaskan langkah-langkah utama untuk anda.

Langkah utama:

1. Import fail js

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src='js/jquery.thoughtBubble.js'></script>

2. Di mana kesan gelembung diperlukan

<div id='mainContainer' class='container'>
<img src='ahout.JPG' id="thoughtBubble" alt='whats up&#63;' />
</div>

3. Gunakan kesan gelembung

<script type="text/javascript">
$(window).ready( function() {
$('#thoughtBubble').thoughtBubble({
text: 'baby,I love you',
font: 'avenir'
});
});

4. Ini ialah kod jquery.thoughtBubblr.js

(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( settings.height ),
style = '"position: absolute; top:' + modifiedHeight + 'px; left:' + offset.left + 'px ; width:' + settings.width + '; height:' + settings.height + ';"',
bubbleContainer = "<div class='bubble-holder' style=" + style + ">" + getMainBubble() + getBubbles() + "</div>";
return bubbleContainer;
},
getMainBubble = function() {
return '<div class="main-bubble-holder"><div class="bubble main-bubble">' + getText() + '</div></div>';
},
getText = function() {
return '<span style="vertical-align: middle; color: ' + settings.fontColor + ';font-size: ' + settings.fontSize + '; font-family: ' + settings.font + '">' + settings.text + '</span>';
},
getBubbles = function() {
return '<div class="sm-bubble-holder"><div class="bubble bubbleLg"></div><div class="bubble bubbleMd"></div><div class="bubble bubbleSm"></div></div>';
},
animate = function(){
var bubbles = $(document).find('.bubble'),
reversed = bubbles.get().reverse(),
speed = settings.speed;
$(reversed[0]).stop().animate({ opacity: 1}, speed, function() {
$(reversed[1]).animate({ opacity: 1}, speed, function() {
$(reversed[2]).animate({ opacity: 1}, speed, function() {
$(reversed[3]).animate({ opacity: 1},speed);
});
});
});
},
unanimate = function() {
var bubbles = $(document).find('.bubble');
bubbles.stop().animate({opacity: 0});
},
shiftDiv = function( container ) {
var bubbleHolder = $(document).find('.bubble-holder'),
previousPosition = container.offset().left;
bubbleHolder.css('left', previousPosition);
};
return this.each( function() {
var $this = $(this),
container = getBubbleDiv( $this );
$this.on('mouseenter', animate );
$this.on('mouseout', unanimate );
$(window).on('resize', shiftDiv.bind(this, $this) );
return $this.parent().prepend(container);
});
};
})(jQuery);

Yang di atas telah berkongsi dengan anda langkah-langkah utama kesan gelembung js. Kod ini mudah dan mudah difahami, jadi saya tidak menulis terlalu banyak penjelasan teks Jika anda mempunyai sebarang soalan, sila tinggalkan saya mesej. Editor akan membalas anda tepat pada waktunya. Berikut adalah editor Terima kasih banyak atas sokongan anda terhadap laman web Script House!