纯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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
Vue3 源码导读(推荐)
Oct 14 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
咖啡的种类和口感
2021/03/03 新手入门
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
python远程登录代码
2008/04/29 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
2014迎接教师节演讲稿
2014/09/10 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
2016高考感言
2015/08/01 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers