纯JS代码实现气泡效果_javascript技巧

就不给大家多文字说明了。给大家梳理下关键步骤。

关键步骤：

1、引入js文件

2、在需要使用气泡效果的地方

3、使用气泡效果

4、这是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 = "
" + getMainBubble() + getBubbles() + "
";
return bubbleContainer;
},
getMainBubble = function() {
return '
' + getText() + '
';
},
getText = function() {
return '' + settings.text + '';
},
getBubbles = function() {
return '
';
},
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);

以上给大家分享了js气泡效果的关键步骤，代码简单易懂，就没给写过多的文字说明，大家有疑问欢迎给我留言，小编会及时回复大家的，在此小编也非常感谢大家对脚本之家网站的支持！