突發(fā)奇想的一個jquery插件
更新時間：2010年11月19日 19:14:25 作者：
這兩天突發(fā)奇想，結(jié)果就做了一個jQ的tip插件，形狀就像下面這樣。會隨title的多少改變大小的喲.
一。基本介紹
這個jq插件主要是使用canvas來畫出這個tip的外表，而且這個tip能夠自動調(diào)整大小，由于是用canvas畫的，而不是圖片，所以調(diào)整之后也不會變模糊之類的。
主要思想是用一個P標簽來裝載title的值，然后把他放在一個大小根據(jù)這個P來改變的canvas里面，難點是定位。
話說貌似我們一開始不指定font-size的時候，火狐可以查找出一個默認的font-size值，而谷歌瀏覽器卻讀不出值，這個較為郁悶。
詳細說明請參考代碼注釋。
二。演示以及代碼
復(fù)制代碼 代碼如下:
(function($){
$.fn.polaTip=function(){
var tips={};//tip集合，對每一個匹配集里面的元素建立一個對象，該對象保存一些需要的信息
//下面的這個tip和上面的沒啥關(guān)系，保存的是一個canvas對象，并且這個canvas是共享的
var tip= $("<canvas style=' position:absolute;top:0px;left:0; z-index:50001; width:100px;height:100px;font-family:Verdana'></canvas>") //text-align:center;vertical-align:maddle;
var div=$("<div style='position:absolute;z-index=50000'>").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 id='title' style=' margin:0;text-align:center;z-index:50002; font-size:16px;vertical-align:maddle;position:absolute; '></p>");
theTip.title=title;//title是每一個元素都有一個的，把他們保存在tips數(shù)組里面
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的值保存到剛剛創(chuàng)建的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];}//根據(jù)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();
})
某斷詞換行函數(shù)
復(fù)制代碼 代碼如下:
function toBreakWord(intLen, obj)//斷詞換行的函數(shù)
{
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"<br>";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}
完整的演示代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.newStyle1
{
background-color: #C0C0C0;
border: 1px solid #00FFFF;
position: absolute;
top: 308px;
left: 17px;
}
</style>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js" > </script>
<script type="text/javascript">
function toBreakWord(intLen, obj)//斷詞換行的函數(shù)
{
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"<br>";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}
</script>
<script type="text/javascript" >
(function($){
$.fn.polaTip=function(){
var tips={};//tip
var tip= $("<canvas style=' position:absolute;top:0px;left:0; z-index:50001; width:100px;height:100px;font-family:Verdana'></canvas>") //text-align:center;vertical-align:maddle;
var div=$("<div style='position:absolute;z-index=50000'>").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 id='title' style=' margin:0;text-align:center;z-index:50002; font-size:16px;vertical-align:maddle;position:absolute; '></p>");
theTip.title=title;
var fontSize=16;
//var fontSize=parseInt(theTip.title.css("fontSize"));
title.css("opacity",0);
div.append(theTip.title);
titleString=$that.attr("title");
var titleStringLength=titleString.length;
$that.attr("title","");
theTip.title.text(titleString);
theTip.titleWidth= theTip.title.width();
theTip.that=$that;
if(this.id) {tips[this.id]=theTip;}
else{$that.addClass(Math.random()+"");tips[$that.attr("class")]=theTip;}
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];}
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);
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)');
radgrad.addColorStop(1, 'rgba(256,256,256,0.5)');
cxt.fillStyle=radgrad ;
cxt.lineJoin="round";
cxt.lineWidth=2;
cxt.clearRect(0,0,300,150);
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)
{ 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();
})
</script>
</head>
<body>
<div style="border: thin solid #00FFFF; background-color: #CCFFCC; width: 800px; font-family: 'Comic Sans MS';">
<h2 style="background-color: #33CCFF; color: #FFFFFF; border: thin solid #C0C0C0; padding: 3px">Pola的實驗室</h2>
<ul>
<li>作為實驗，"W3C"，"麻省理工學(xué)院"，"萬維網(wǎng)"，"HTML","CSS","XML",和那個詭異的按鈕都是有tip的，內(nèi)容保存在title里</li>
<li>添加功能的語句：$("div p").children().add("#Button1").polaTip();</li>
<li>此插件只能運行于支持canvas標簽的瀏覽器上</li>
<li>注：沒用excanvas.js來支持IE下的canvas是因為這個文件太大，單單用來畫提示框就太浪費了</li>
</ul>
</div>
<div class="newStyle1"> <p style="width: 654px; height: 112px">W3C是英文 World Wide Web Consortium 的縮寫，中文意思是<abbr title="World Wide Web Consortium"> W3C</abbr>理事會或萬維網(wǎng)聯(lián)盟。W3C于1994年10月在<a href="#" title="麻省理工學(xué)院（Massachusetts Institute of Technology，縮寫：MIT）是美國一所綜合性私立大學(xué)"> 麻省理工學(xué)院</a> 計算機科學(xué)實驗室成立。創(chuàng)建者是<abbr title="World Wide Web"> 萬維網(wǎng)</abbr> 的發(fā)明者Tim Berners-Lee。 W3C組織是對網(wǎng)絡(luò)標準制定的一個非贏利組織，像<abbr title="HyperText Mark-up Language"> HTML</abbr> 、XHTML 、<abbr title="Cascading Style Sheet"> CSS</abbr> 、<abbr title="Extensible Markup Language"> XML</abbr> 的標準就是由W3C來定制。W3C會員（大約500名會員）包括生產(chǎn)技術(shù)產(chǎn)品及服務(wù)的廠商、內(nèi)容供應(yīng)商、團體用戶、研究實驗室、標準制定機構(gòu)和政府部門，一起協(xié)同工作，致力在萬維網(wǎng)發(fā)展方向上達成共識。</p>
<input id="Button1" type="button" value="按鈕" onclick="alert('開玩笑的~')" title="點擊我你就杯具啦" /></div>
</body>
</html>
相關(guān)文章
這篇文章主要為大家詳細介紹了基于jquery二維碼生成插件qrcode的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這個是上次在博客園看到的一篇文章，經(jīng)測試，確實比jquery的$(document).ready(function(){....})更快，并且在ie和火狐等主流瀏覽器上都沒問題2010-04-04
這篇文章主要介紹了jQuery基本過濾選擇器用法,結(jié)合實例形式分析了jQuery中:first、:last、:not、:even、:odd、:eq、:gt等基本過濾選擇器的使用方法,需要的朋友可以參考下2016-09-09
jQuery ui插件的使用方法代碼實例，需要的朋友可以參考一下2013-05-05
這篇文章主要介紹了jQuery實現(xiàn)幻樹形下拉菜單特效，代碼簡單，非常具有實用價值，需要的朋友可以參考下2015-08-08
jQuery 1.9.1源碼分析系列（十四）之常用jQuery工具
這篇文章主要介紹了jQuery 1.9.1源碼分析系列（十四）之常用jQuery工具的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要給大家介紹了關(guān)于jQuery實現(xiàn)簡單彈出框效果的相關(guān)資料,幾天一直在研究JQuery,確實很好用,有很多需求都是要彈出框,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
超好用的jQuery分頁插件jpaginate用法示例【附源碼下載】
這篇文章主要介紹了超好用的jQuery分頁插件jpaginate用法,結(jié)合實例形式簡單分析了jQuery分頁插件jpaginate的基本調(diào)用方式、參數(shù)屬性及配置方法,并附帶源碼供讀者下載,需要的朋友可以參考下2018-12-12
jquery toggle點擊實現(xiàn)內(nèi)容的顯示效果，喜歡的朋友可以參考下。2010-05-05
Jquery原生態(tài)實現(xiàn)表格header頭隨滾動條滾動而滾動
表頭是浮動的，因為內(nèi)容在同一頁面展示，當(dāng)滾動時，看不到列頭，為了改動少只能使用jquery原生態(tài)實現(xiàn)滾動2014-03-03