原创BubbleTips气泡提示Jquery插件
dengjianbin
12年前
此插件是一款互联网上非常实用的插件，漫画在项目中也经常用到，为了方便网友们使用，漫画就将此功能封装成一个通用的插件，代码很简洁，代码总共加起来了40多行，最适合网友学习用，主要实现了上、下、左、右四个方位的显示，带有可关闭操作，插件带有3个参数设置：如下
1、position：箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r)
2、value ：小箭头偏离左边和上边的位置
3、content ：显示的提示内容
用法很简单、步骤如下：
1、引入Jquery核心包
2、引入插件样式文件
3、引入插件包
4、初始化插件
效果如下：
插件源码如下：
$(function() { $.fn.manhua_bubbletips = function(options) { var defaults = { position : "t", //箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r) value : 15, //小箭头偏离左边和上边的位置 content : "" //内容 }; var options = $.extend(defaults,options); var offset = $(this).offset(); var bid = parseInt(Math.random()*100000); $("body").prepend('<div class="docBubble" id="btip'+bid+'"><i class="triangle-'+options.position+'"></i> <i class="close" title="关闭" id="btipc'+bid+'">关闭</i><div class="tl"><div class="inner"><div class="cont">'+options.content+'</div></div></div><div class="tr"></div><div class="bl"></div></div>'); var $btip = $("#btip"+bid); var $btipClose = $("#btipc"+bid); var h = $(this).height(); var w = $(this).width(); switch(options.position){ case "t" ://当它是上面的时候 $(".triangle-t").css('left',options.value); $btip.css({ "left":offset.left+w/2-options.value , "top":offset.top+h+14 }); break; case "b" ://当它是下面的时候 $(".triangle-b").css('left',options.value); $btip.css({ "left":offset.left+w/2-options.value , "top":offset.top-h-7-$btip.height() }); break; case "l" ://当它是左边的时候 $(".triangle-l").css('top',options.value); $btip.css({ "left":offset.left+w+10 , "top":offset.top+h/2-7-options.value }); break; case "r" ://当它是右边的时候 $(".triangle-r").css('top',options.value); $btip.css({ "left":offset.left-w+25-$btip.width() , "top":offset.top+h/2-7-options.value }); break; } $btipClose.live("click",function(e){ $btip.hide(); }); } });