突然のjquery plug-in_jquery

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 = $ ("

");
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) "";

strContent=strContent.substr(intLen,strContent.length);
strTemp = strContent; >obj.innerHTML=strTemp;
}

完全なデモ コード:

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

;/h2>

実験として、「W3C」、「MIT」、「HTML」、「CSS」、「XML」奇妙なボタンには両方ともヒントがあり、内容はタイトルに保存されます

関数を追加するステートメント: $("div p").children().add("# Button1")。 polaTip();

このプラグインは、canvas タグをサポートするブラウザでのみ実行できます

注: excanvas は使用されません。このファイルは大きすぎて、プロンプト ボックスを描画するだけでは無駄が多すぎるため、IE ではキャンバスがサポートされていました。

< ;div class="newStyle1">

W3C は英語の World Wide Web Consortium の略称で、中国語の意味は W3C略> 評議会または World Wide Web コンソーシアム。 W3C は 1994 年 10 月に / a> に設立されました。 World Wide Web の発明者、Tim Berners-Lee によって作成されました。 W3C 組織は、、XHTML、 などのインターネット標準を開発する非営利団体です。 ; /abbr> XML 標準は W3C によってカスタマイズされています。 W3C メンバー (約 500 人のメンバー) には、テクノロジー製品およびサービスのメーカー、コンテンツ プロバイダー、コミュニティ ユーザー、研究所、標準開発組織、政府部門が含まれており、World Wide Web の開発方向について合意に達するために協力しています。