纯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 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
微信小程序实现购物车功能
Nov 18 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
基于mysql的论坛(6)
2006/10/09 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP7新功能总结
2019/04/14 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
React Router基础使用
2017/01/17 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
python设定并获取socket超时时间的方法
2019/01/12 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
在线课程:Skillshare
2019/04/02 全球购物
后备干部考察材料
2014/02/12 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
个性发展自我评价2015
2015/03/09 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android