突发奇想的一个jquery插件_jquery

").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();
})