纯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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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中array_merge和array相加的区别分析
2013/06/17 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
讲解Python中的标识运算符
2015/05/14 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Windows下python3.7安装教程
2018/07/31 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
高二学生评语大全
2014/04/25 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL