一。基本介绍
这个jq插件主要是使用canvas来画出这个tip的外表，而且这个tip能够自动调整大小，由于是用canvas画的，而不是图片，所以调整之后也不会变模糊之类的。
主要思想是用一个p标签来装载title的值，然后把他放在一个大小根据这个p来改变的canvas里面，难点是定位。
话说貌似我们一开始不指定font-size的时候，火狐可以查找出一个默认的font-size值，而谷歌浏览器却读不出值，这个较为郁闷。
详细说明请参考代码注释。
二。演示以及代码
复制代码 代码如下:
(function($){
$.fn.polatip=function(){
var tips={};//tip集合，对每一个匹配集里面的元素建立一个对象，该对象保存一些需要的信息
//下面的这个tip和上面的没啥关系，保存的是一个canvas对象，并且这个canvas是共享的
var tip= $() //text-align:center;vertical-align:maddle;
var div=$().append(tip);
div.appendto(body);
var cxt = tip[0].getcontext(2d);
this.each(function(){
var $that=$(this);
var offset= $that.offset();
var setleft=offset.left;//取得相对于页面的位置
var settop=offset.top;
var thetip={};
var title= $(
);
thetip.title=title;//title是每一个元素都有一个的，把他们保存在tips数组里面
var fontsize=16;
//var fontsize=parseint(thetip.title.css(fontsize));
title.css(opacity,0);//先默认隐藏这个要装载元素的title属性的p
div.append(thetip.title);
titlestring=$that.attr(title);//取得title属性
var titlestringlength=titlestring.length;//取得title的长度
$that.attr(title,);
title.text(titlestring);//那元素title的值保存到刚刚创建的p里面
thetip.titlewidth= title.width();//装载后的p的宽度
thetip.that=$that;
if(this.id) {tips[this.id]=thetip;}
else{$that.addclass(math.random()+);tips[$that.attr(class)]=thetip;}//如果有id就用id做key，没有的话就生成随机的class作为key
if(thetip.titlewidth>250||titlestringlength>(250/fontsize)){//如果这个title过长，那么就进行换行
var rowlength=math.sqrt(titlestringlength*(5/1))*fontsize;
tobreakword( (rowlength*1.3)/fontsize,thetip.title[0]);
thetip.title.css(width,rowlength);
}
else{thetip.title.css({width:titlestringlength*fontsize+10});}//,whitespace:nowrap
$that.hover(
function(){
var thetip=null;
if(this.id){thetip=tips[this.id];}
else{thetip=tips[this.classname];}//根据key取得自己在tips里面的对象
var title=thetip.title;
/*宽高计算*/
var height=title.height()*1.1+20;
var width=title.width()*1.1+20;
title.css({top:title.height()*0.1*0.5+10+px,left:width*0.1+2+px});
tip.css({height:height+px,width:width+px});
var lingrad = cxt.createlineargradient(0,0,0,150); //canvas的线性渐变
lingrad.addcolorstop(0, '#00abeb');
lingrad.addcolorstop(0.5, 'rgba(10, 150, 255, 0.9)');
cxt.strokestyle=lingrad;
var radgrad = cxt.createradialgradient(150,75,10,150,75,150); //canvas的反射性渐变
radgrad.addcolorstop(0, 'rgba(10, 150, 255, 0.3)');
radgrad.addcolorstop(0.5, 'rgba(10, 150, 255, 0.3)');
radgrad.addcolorstop(1, 'rgba(256,256,256,0.5)');
cxt.linejoin=round;//两线形成夹角时候的夹角形状
cxt.linewidth=2;//线宽
cxt.clearrect(0,0,300,150);//清空canvas，因为canvas是共享的，必须清空上一次的东西
/*画我想要的tip形状*/
cxt.beginpath();
cxt.moveto(30.5,5.5);
cxt.lineto(285.5,5.5);
cxt.lineto(285.5,135.5);
cxt.lineto(75.5,135.5);
cxt.lineto(2.5,148.5);
cxt.lineto(30.5,125.5);
cxt.lineto(30.5,5.5);
cxt.stroke();
/*填充*/
cxt.fillstyle=#fff;
cxt.fill();
cxt.fillstyle=radgrad ;
cxt.fill();
for(var flagtip in tips)//让其他tip的文字隐藏
{ flagtip=tips[flagtip];
if(flagtip==thetip){flagtip.title.css(opacity,1);}
else{
if(flagtip.title.css){flagtip.title.css(opacity,0);}
}
}
div.css({left:setleft+$that.width()+px,top:settop-2*tip.height()+px,opacity:0,height:height,width:width});
div.stop();
div.animate({top:settop-tip.height()+px,opacity:1},500)
},
function(){
div.stop();
div.animate({top:settop-2*tip.height()+px,opacity:0},1000)
})//hover
})//each
}
})(jquery)
$(function(){
$(div p).children().add(#button1).polatip();
})
某断词换行函数
复制代码 代码如下:
function tobreakword(intlen, obj)//断词换行的函数
{
var strcontent=obj.innerhtml;
var strtemp=;
while(strcontent.length>intlen){
strtemp+=strcontent.substr(0,intlen)+
;
strcontent=strcontent.substr(intlen,strcontent.length);
}
strtemp+= strcontent;
obj.innerhtml=strtemp;
}
完整的演示代码:
复制代码 代码如下:
pola的实验室
作为实验，w3c，麻省理工学院，万维网，html,css,xml,和那个诡异的按钮都是有tip的，内容保存在title里
添加功能的语句：$(div p).children().add(#button1).polatip();
此插件只能运行于支持canvas标签的浏览器上
注：没用excanvas.js来支持ie下的canvas是因为这个文件太大，单单用来画提示框就太浪费了
w3c是英文 world wide web consortium 的缩写，中文意思是 w3c理事会或万维网联盟。w3c于1994年10月在 麻省理工学院 计算机科学实验室成立。创建者是 万维网 的发明者tim berners-lee。 w3c组织是对网络标准制定的一个非赢利组织，像 html 、xhtml 、 css 、 xml 的标准就是由w3c来定制。w3c会员（大约500名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。