

一。基本介绍
这个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= $(“<canvas style=’ position:absolute;top:0px;left:0; z-index:50001; width:100px;height:100px;font-family:Verdana’></canvas>”) //text-align:center;vertical-align:maddle;
var div=$(“<div style=’position:absolute;z-index=50000′>”).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= $(“<p id=’title’ style=’ margin:0;text-align:center;z-index:50002; font-size:16px;vertical-align:maddle;position:absolute; ‘></p>”);
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;










