之前在写一个界面，想要用到气泡，然而一直找不到现成的有效地办法，是在没有办法了我只好自己写一个，于是就有了现在的CreateBubble.js。很简单的一个函数，但是非常实用。
使用方法：
1.HTML代码：
一个气泡对话框就是一个div,div内嵌另一个div，很简单的结构。
<div class="tag">
css3气泡框
<div class="tail"></div>
</div>
其中div的class或者id不限制，可以随意给，也可以不定义。
函数源码：
$.fn.createBubble = function(obj){
$(this).each(function(k,v){
var $tail = $(v).find('div');
var doubleRadius = '-'+(parseInt((obj.radius).replace(/px/g,''))*2).toString()+'px';
$(v).css({
'width':obj.width,
'height':obj.height,
'background-color':obj.color,
'border-radius':obj.radius,
'position':'absolute',
'overflow':'visible'
});
$tail.css({
'position':'absolute',
'width':'0px',
'height':'0px',
'border':obj.tailSize + ' solid transparent'
});
switch(obj.tailPosition){
case 'top': $tail.css({'top':doubleRadius,'border-bottom-color':obj.color});break;
case 'right':$tail.css({'right':doubleRadius,'border-left-color':obj.color});break;
case 'bottom':$tail.css({'bottom':doubleRadius,'border-top-color':obj.color});break;
case 'left':$tail.css({'left':doubleRadius,'border-right-color':obj.color});break;
default:console.error('parameters given to function createBubble is not correct!');
}
if(obj.left && (obj.tailPosition == 'bottom' || obj.tailPosition == 'top')){
$tail.css('left',obj.left);
}
else if(obj.bottom && (obj.tailPosition == 'left' || obj.tailPosition == 'right')){
$tail.css('bottom',obj.bottom);
}
else{
console.error('Parameters are not correct!');
}
if(obj.isShadow){
$(v).hover(function(){
$(v).css('box-shadow','2px 2px 5px #888888');
},function(){
$(v).css("box-shadow","none");
});
}
});
};
//parameters that obj should contain
// var obj = {
// width:'100px',
// height:'80px', size of the bubble
// isShadow:true, whether shadow or not
// color:'#09F', color of the bubble
// radius:'10px', bubble's border-radius property
// tailPosition:'right', position of the tail
// bottom:'80px', when tailPosition = 'left' or 'right'
// left:'100px', when tailPosition = 'top' or 'bottom'
// tailSize:'10px' size of the tail
// };其中的注释已经详细的说明了配置的内容。星号（*）代表必填项。
实际使用如下:
HTML代码
JavaScript代码
效果图
其他效果：
在大量使用到气泡的场景，引入这个函数还是非常省心的。不过在使用该函数之前记得引用jQuery。
该函数代码已被放在我的GitHub上了，欢迎大家更新改进或者克隆。