갑자기 jquery 플러그인_jquery

하나. 기본 소개
이 jq 플러그인은 이 팁의 모양을 주로 캔버스를 사용하며 이 팁은 그림이 아닌 캔버스로 그려지기 때문에 자동으로 크기를 조정할 수 있습니다. 조정 그런 것.
주요 아이디어는 P 태그를 사용하여 제목의 값을 로드한 다음 P에 따라 크기가 변경되는 캔버스에 배치하는 것입니다. 어려운 점은 위치 지정입니다.
처음에 글꼴 크기를 지정하지 않으면 Firefox에서는 기본 글꼴 크기 값을 찾을 수 있지만 Google Chrome에서는 해당 값을 읽을 수 없어 상당히 답답합니다.
자세한 지침은 코드 주석을 참조하세요.
둘. 데모 및 코드

코드 복사 코드는 다음과 같습니다.

(function($){
$.fn.polaTip=function(){
var Tips={};//tip 컬렉션, 일치 세트의 각 요소에 대한 객체 생성, 이 개체는 몇 가지 필수 정보를 저장합니다
//아래 팁은 위의 팁과 관련이 없습니다. 캔버스 개체를 저장하고 이 캔버스는 공유됩니다.
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 settop=offset.top;
var theTip={}>var title = $ ("

");
theTip.title=title;//각 요소마다 하나의 제목이 있으므로 팁 배열에 저장하세요.
varfontSize=16;
//varfontSize=parseInt(theTip .title.css("fontSize"));
title.css("opacity",0);//먼저 기본적으로 로드할 요소의 제목 속성의 P를 숨깁니다.
div.append( theTip.title);
titleString=$that.attr("title");//제목 속성 가져오기
var titleStringLength=titleString.length;//제목 길이 가져오기
$that. attr( "title","");
title.text(titleString);//요소 제목의 값은 방금 생성된 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를 키로 사용하고, 없으면 임의의 클래스를 키로 생성
(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];}//키를 기반으로 팁에서 나만의 개체 가져오기
var title=theTip. title;
/*너비 높은 계산*/
var height=title.height()*1.1 20
var width=title.width()*1.1 20; 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')
lingrad.addColorStop(0.5, ' rgba(10, 150, 255, 0.9)');
cxt.StrokeStyle=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";//두 선이 각을 이루는 각의 모양
cxt.lineWidth=2;//선 너비
cxt.clearRect(0, 0,0,300,150);//캔버스를 비우기 때문에 캔버스를 공유하기 때문에 마지막을 비워야 합니다
/*원하는 끝 모양을 그립니다*/
cxt.beginPath() ;
cxt.moveTo(30.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.fillStyle=radgrad;
cxt.fill()
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
})//각
}
})(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;
}


전체 데모 코드:

코드 복사 코드는 다음과 같습니다.

제목>

제목에 저장됩니다. $("div p").children().add("# Button1"). polaTip();

이 플러그인은 캔버스 태그를 지원하는 브라우저에서만 실행할 수 있습니다

참고: excanvas는 사용되지 않습니다. 이 파일은 너무 커서 프롬프트 상자를 그리는 것만으로는 너무 낭비되기 때문에 IE에서 캔버스를 지원하는 데 사용됩니다.

class="newStyle1">

W3C는 English World Wide Web Consortium의 약자로, 중국어 의미는협의회 또는 월드와이드웹 컨소시엄. W3C는 1994년 10월에 발표했습니다. 월드 와이드 웹의 발명가인 Tim Berners-Lee가 만들었습니다. W3C 조직은 HTML, XHTML, ; /abbr> , XML 표준은 W3C에 의해 맞춤화되었습니다. W3C 회원(약 500명)은 기술 제품 및 서비스 제조업체, 콘텐츠 제공자, 사용자 그룹, 연구소, 표준 개발 조직 및 정부 부서를 포함하며 월드 와이드 웹(World Wide Web)의 개발 방향에 대한 합의에 도달하기 위해 협력하고 있습니다.