首页
所有分类
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 相关文章推荐
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
Pillow(2) 蒙特卡罗(1) 条形图(1) 微信小程序(9) bufio(1) 可视化动图(1) ipyvizzu(1) matplotlib(7) vue-esign(1) pdfkit(1)
You might like
php图片添加水印例子
2016/07/20 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python如何定义带参数的装饰器
2018/03/20 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
美国一家运动专业鞋类零售商：Warehouse Shoe Sale（WSS）
2018/03/28 全球购物
美国领先的在线邮轮旅游公司：CruiseDirect
2018/06/07 全球购物
性能服装：HYLETE
2018/08/14 全球购物
领先的荷兰线上超市：荷兰之家Holland at Home（支持中文）
2021/01/21 全球购物
承诺书的格式范文
2014/03/28 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
跑操口号
2014/06/12 职场文书
公益广告标语
2014/06/19 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
html5表单的required属性使用
2021/07/07 HTML / CSS
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL