纯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代码
Nov 10 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
node.js基础知识汇总
2020/08/25 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python 数据结构之堆栈实例代码
2017/01/22 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
党员转正意见怎么写
2015/06/03 职场文书
科级干部培训心得体会
2016/01/06 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Flask response响应的具体使用
2021/07/15 Python