首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

突发奇想的一个jquery插件

Posted in Javascript onNovember 19, 2010

突发奇想的一个jquery插件
突发奇想的一个jquery插件
一。基本介绍
这个jq插件主要是使用canvas来画出这个tip的外表，而且这个tip能够自动调整大小，由于是用canvas画的，而不是图片，所以调整之后也不会变模糊之类的。
主要思想是用一个P标签来装载title的值，然后把他放在一个大小根据这个P来改变的canvas里面，难点是定位。
话说貌似我们一开始不指定font-size的时候，火狐可以查找出一个默认的font-size值，而谷歌浏览器却读不出值，这个较为郁闷。
详细说明请参考代码注释。
二。演示以及代码 

(function($){ 
$.fn.polaTip=function(){ 
var tips={};//tip集合，对每一个匹配集里面的元素建立一个对象，该对象保存一些需要的信息 
//下面的这个tip和上面的没啥关系，保存的是一个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数组里面 
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的值保存到刚刚创建的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];}//根据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(); 
})

某断词换行函数 
function toBreakWord(intLen, obj)//断词换行的函数 
{ 
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; 
}

完整的演示代码: 
<!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.3water.com/jslib/jquery/jquery.js" > </script> 
<script type="text/javascript"> 
function toBreakWord(intLen, obj)//断词换行的函数 
{ 
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"，"麻省理工学院"，"万维网"，"HTML","CSS","XML",和那个诡异的按钮都是有tip的，内容保存在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>理事会或万维网联盟。W3C于1994年10月在<a href="#" title="麻省理工学院（Massachusetts Institute of Technology，缩写：MIT）是美国一所综合性私立大学"> 麻省理工学院</a> 计算机科学实验室成立。创建者是<abbr title="World Wide Web"> 万维网</abbr> 的发明者Tim Berners-Lee。 W3C组织是对网络标准制定的一个非赢利组织，像<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名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。</p> 
<input id="Button1" type="button" value="按钮" onclick="alert('开玩笑的~')" title="点击我你就杯具啦" /></div> 
</body> 
</html>

突发奇想的一个jquery插件

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
简单了解JS打开url的方法
Feb 21 Javascript
基于JQuery的访问WebService的代码（可访问Java[Xfire]）
Nov 19 #Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 #Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 #Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 #Javascript
DIV菜单层实现代码
Nov 19 #Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 #Javascript
基于jquery的跨域调用文件
Nov 19 #Javascript
BufferPool(1) 逻辑函数(1) http_stub_status_module(1) 复合索引(1) element-ui(1) 连接查询(1) location(2) 缓存机制(1) zabbix(9) 数据合并(1)
You might like
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
smarty中常用方法实例总结
2015/08/07 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
php封装的page分页类完整实例
2016/10/18 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python 不以科学计数法输出的方法
2018/07/16 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
木工主管岗位职责
2013/12/08 职场文书
小学英语课后反思
2014/04/26 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
签约仪式致辞
2015/07/30 职场文书
团结主题班会
2015/08/13 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python