纯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获取元素transform参数

    浅谈javascript获取元素transform参数

    本文主要给大家简单介绍了javascript获取元素的transform参数的方法以及个人的理解,记录下来分享给大家。
    2015-07-07
  • 使用getBoundingClientRect方法实现简洁的sticky组件的方法

    使用getBoundingClientRect方法实现简洁的sticky组件的方法

    本文介绍这种组件的实现思路,并提供一个同时支持将sticky元素固定在顶部或底部的具体实现,由于这种组件在网站中非常常见,所以有必要掌握它的实现方式,以便在有需要的时候基于它的思路写出功能更多的组件出来
    2016-03-03
  • JS中dom0级事件和dom2级事件的区别介绍

    JS中dom0级事件和dom2级事件的区别介绍

    这篇文章主要介绍了JS中dom0级事件和dom2级事件的区别介绍,非常有参考价值,特此分享到脚本之家平台供大家参考
    2016-05-05
  • js中的scroll和offset 使用比较的实例与分析

    js中的scroll和offset 使用比较的实例与分析

    这篇文章介绍了js中的scroll和offset使用比较的实例与分析,有需要的朋友可以参考一下
    2013-09-09
  • 基于JavaScript实现购物网站商品放大镜效果

    基于JavaScript实现购物网站商品放大镜效果

    大家在日常生活中都有网购的经验,有的网站会有商品放大镜功能,效果非常棒,那么基于js代码是如何实现的呢?下面小编给大家带来了基于js实现购物网站商品放大镜效果,非常不错,感兴趣的朋友参考下吧
    2016-09-09
  • 一起来了解一下JavaScript的预编译(小结)

    一起来了解一下JavaScript的预编译(小结)

    这篇文章主要介绍了一起来了解一下JavaScript的预编译(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • JavaScript的六种继承方式(推荐)

    JavaScript的六种继承方式(推荐)

    继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的
    2017-06-06
  • JavaScript中的全局属性与方法深入解析

    JavaScript中的全局属性与方法深入解析

    这篇文章主要给大家介绍了关于JavaScript中全局属性与方法的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-06-06
  • javascript下function声明一些小结

    javascript下function声明一些小结

    function声明一些东西,我们都知道function和var一样是预处理的在js里面,但是到底什么是函数声明呢,我们来看几个例子
    2007-12-12
  • canvas绘制环形进度条

    canvas绘制环形进度条

    本文主要介绍了canvas绘制环形进度条的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论