突然のjquery plug-in_jquery-jsチュートリアル-php.cn

1 つ。基本紹介
この jq プラグインは主にキャンバスを使用してこのチップの外観を描画します。このチップは画像ではなくキャンバスで描画されるため、後でぼやけることはありません。そういった調整。
主なアイデアは、P タグを使用してタイトルの値をロードし、P に応じてサイズが変化するキャンバスにタイトルを配置することです。難しいのは配置です。
最初に font-size を指定しないと、Firefox はデフォルトの font-size 値を見つけることができるようですが、Google Chrome はその値を読み取れず、非常にイライラします。
詳細な手順については、コードのコメントを参照してください。
2つ。デモとコード

コードをコピーコードは次のとおりです:

(function($){
$.fn.polaTip=function(){
vartips={};//ヒントコレクション、一致するセット内の各要素のオブジェクトを作成します、このオブジェクトは必要な情報をいくつか保存します
//以下のヒントは上のヒントとは関係がありません。キャンバスオブジェクトが保存され、このキャンバスは共有されます
vartip= $("

") //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 theTip={};
var title = $ ("

< /p>");
theTip.title=title;//要素ごとに 1 つのタイトルがあり、ヒント配列に保存します
var fontSize=16;
//var fontSize=parseInt(theTip .title.css("fontSize"));
title.css("opacity",0);//まずデフォルトで読み込まれる要素のtitle属性のPを非表示にします
div.append( theTip.title);
titleString=$that.attr("title");//タイトル属性を取得します
var titleStringLength=titleString.length;//タイトルの長さを取得します
$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 をキーとして使用し、ない場合はランダムなクラスをキーとして生成します
if (theTip.titleWidth>250|| titleStringLength>(250/fontSize)){//タイトルが長すぎる場合は、折り返してください
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
var title=theTip に基づいてヒント内の独自のオブジェクトを取得します。 title;
/*width 高計算*/
var height=title.height()*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); //キャンバスの線形グラデーション
lingrad.addColorStop(0, '#00ABEB'); rgba(10, 150, 255, 0.9)');
cxt.drawingStyle=lingrad;
var radgrad = cxt.createRadialGradient(150,75,10,150,75,150); //キャンバスの反射グラデーション
radgrad.addColorStop(0, ' rgba(10, 150, 255, 0.3)'); radgrad.addColorStop(0.5, 'rgba(10, 150, 255, 0.3)'); 1, 'rgba(256,256,256, 0.5)');
cxt.lineJoin="round";//2 つの線が角度を形成するときの角度の形状
cxt.lineWidth=2;//線幅
cxt.clearRect(0, 0,300,150);//キャンバスをクリアします。キャンバスは共有されているため、最後にクリアする必要があります。
/*必要な先端の形状を描画します*/
cxt.beginPath() ;
cxt.moveTo(30.5,5.5);
cxt.lineTo(285.5,135.5); 🎜>cxt.lineTo(2.5, 148.5);
cxt.lineTo(30.5,5.5); */
cxt.fillStyle ="#fff";
cxt.fillStyle=radgrad;
for(ヒントの var flagtip) )//他のヒントのテキストを非表示にする
{ flagtip==theTip){flagtip.title.css("opacity",1);}
else {
if(flagtip.title .css){flagtip.title.css("不透明度",0);}
}
}
div.css({left:setleft $that.width () "px",top:settop -2*tip.height() "px",opacity:0,height:height,width:width});
div.stop(); ({top:settop-tip.height () "px",opacity:1},500)
},
function(){
div.stop(); {top:settop-2*tip.height() "px",opacity:0},1000)
})//ホバー
})//それぞれ
}
})(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) "< br>";