首页
所有分类
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 this 和 $(this) 的区别
Aug 23 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
基于vue实现简易打地鼠游戏
Aug 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
cudnn(1) 数据备份(2) Vite(1) expdp(1) dict(1) 字符画(1) hook(1) callback(1) 热力图(1) 脚本(1)
You might like
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
React-Native实现ListView组件之上拉刷新实例（iOS和Android通用）
2017/07/11 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
vue组件（全局，局部，动态加载组件）
2018/09/02 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python如何实现一个刷网页小程序
2018/11/27 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
基于python实现地址和经纬度转换
2020/05/19 Python
如何卸载python插件
2020/07/08 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
详解anaconda安装步骤
2020/11/23 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
Steiff台湾官网：德国金耳釦泰迪熊
2019/12/26 全球购物
第二层交换机和路由器的区别？第三层交换机和路由器的区别？
2013/05/23 面试题
应聘教师推荐信
2013/10/31 职场文书
中学老师的自我评价
2013/11/07 职场文书
技校个人求职信范文
2014/01/25 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2014年采购部工作总结
2014/11/20 职场文书
护士节慰问信
2015/02/15 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
合理化建议书范文
2015/09/14 职场文书