前端开发

 首页 > 前端开发 > javascript > 纯JS代码实现气泡效果

纯JS代码实现气泡效果

分享到:
【字体:
导读:
          就不给大家多文字说明了。给大家梳理下关键步骤。 关键步骤: 1、引入js文件 scripttype=text/javascriptsrc=js/jquery.min.js/scriptscripttype=text/javascriptsrc=js/jquery.thoughtBubble.js/script 2、在需要使用气...

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

关键步骤:

1、引入js文件


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



3、使用气泡效果


$(window).ready( function() {
$('#thoughtBubble').thoughtBubble({
text: 'baby,I love you',
font: 'avenir'
});
});

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气泡效果的关键步骤,代码简单易懂,就没给写过多的文字说明,大家有疑问欢迎给我留言,小编会及时回复大家的,在此小编也非常感谢大家对脚本之家网站的支持!

分享到:
javascript图片预加载技术
项目开发中时常需要用 JS 判断一张图片是否加载成功,如果图片加载成功,则执行其相应的 onload 绑定事件, 这个就是我们所说的图片预加载技术,先上最终版代码: function loadImage(url, callback) {         var img = new Image();         img.onload = function () {        ...
javascript实现下雪效果【实例代码】
原理 : 1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。 2、js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3、好像不够完善勿喷 HTML代码:      雪花飞舞                  CSS代码 *{   margin:0;   padding:0;   lis...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……