纯JS代码实现气泡效果


Posted in Javascript onMay 04, 2016

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

关键步骤:

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 相关文章推荐
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
JS常用知识点整理
Jan 21 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
javascript随机变色实例代码
Oct 15 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
DWR中各种java方法的调用
May 04 #Javascript
js实现div在页面拖动效果
May 04 #Javascript
JS功能代码集锦
May 04 #Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 #Javascript
浅析Bootstrap组件之面板组件
May 04 #Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 #Javascript
js编写当天简单日历效果【实现代码】
May 03 #Javascript
You might like
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python聊天室程序(基础版)
2018/04/01 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
少先队学雷锋活动总结范文
2014/03/09 职场文书
期末学生评语大全
2014/04/24 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
股权投资协议书
2016/03/23 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
Python测试框架pytest高阶用法全面详解
2022/06/01 Python