纯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中获取请求的URL参数[正则]
Dec 25 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
vue实现购物车选择功能
Jan 10 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
php基本函数汇总
2015/07/09 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
python单链表实现代码实例
2013/11/21 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
使用python实现rsa算法代码
2016/02/17 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
python之yield和Generator深入解析
2019/09/18 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python中qutip用法示例详解
2020/10/02 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
采购部部长岗位职责
2014/02/06 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang
Golang gRPC HTTP协议转换示例
2022/06/16 Golang