갑자기 jquery 플러그인_jquery-JS 튜토리얼-php.cn

갑자기 jquery 플러그인_jquery

WBOY

풀어 주다： 2016-05-16 18:16:01

원래의

932명이 탐색했습니다.

하나. 기본 소개
이 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 = $ ("

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

특정 단어 분리 및 줄 바꿈 기능

코드 복사