纯JS代码实现气泡效果

 更新时间:2016年05月04日 11:32:13   作者:fantasticbaby   我要评论
js气泡效果,在项目需求中经常遇到。今天小编把大概实现步骤分享到澳门金沙网上娱乐平台,感兴趣的朋友可以参考下

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

关键步骤:

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: '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 = "<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);

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

相关文章

  • javascript用DIV模拟弹出窗口_窗体滚动跟随

    javascript用DIV模拟弹出窗口_窗体滚动跟随

    可滚动跟随弹出框效果代码,非常实用的应用于网络
    2008-09-09
  • JS中递归函数

    JS中递归函数

    编程语言中,函数Func(Type a,……)直接或间接调用函数本身,则该函数称为递归函数。递归函数不能定义为内联函数。这篇文章主要介绍了JS中递归函数的相关资料,需要的朋友可以参考下
    2016-06-06
  • js实现文字跑马灯效果

    js实现文字跑马灯效果

    本文主要介绍了js实现文字超过显示宽度每间隔1s自动向左滚动显示的跑马灯效果,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 解决JS无法调用Controller问题的方法

    解决JS无法调用Controller问题的方法

    这篇文章主要介绍了解决JS无法调用Controller问题的方法,需要的朋友可以参考下
    2015-12-12
  • 页面定时刷新(1秒刷新一次)

    页面定时刷新(1秒刷新一次)

    页面定时刷新的示例想必大家也见到不少,在本文将为大家介绍的是,如何实现1秒刷新一次,感兴趣的朋友可以了解下本文
    2013-11-11
  • JavaScript动态添加style节点的方法

    JavaScript动态添加style节点的方法

    这篇文章主要介绍了JavaScript动态添加style节点的方法,涉及javascript节点操作的相关技巧,需要的朋友可以参考下
    2015-06-06
  • 灵活使用数组制作图片切换js实现

    灵活使用数组制作图片切换js实现

    这篇文章主要介绍了灵活使用数组制作图片切换效果,js实现图片切换特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 使用post方法实现json往返传输数据的方法

    使用post方法实现json往返传输数据的方法

    今天小编就为大家分享一篇关于使用post方法实现json往返传输数据的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • footer定位页面底部(代码分享)

    footer定位页面底部(代码分享)

    本文主要分享了footer定位页面底部的实例代码,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript登录验证基础教程

    JavaScript登录验证基础教程

    这篇文章主要为大家详细介绍了JavaScript登录验证的基础教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论