首页
所有分类
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 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
微信小程序实现图片上传功能
May 28 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 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
SRF-S83(1) 松下(1) ICF-SW55(1) PL660(1) 台湾(1) Panasonic(1) 南麂列岛(1) 根德(2) S2000(3) SRF-S84(1)
You might like
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python中遍历列表的方法总结
2019/06/27 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Python如何合并多个字典或映射
2020/07/24 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
印度在线内衣和时尚目的地：Zivame
2017/09/28 全球购物
乌克兰电子和家用电器商店：Foxtrot
2019/07/23 全球购物
全球性的众包图形设计市场：DesignCrowd
2021/02/02 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
关于Java finally的面试题
2016/04/27 面试题
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
支行行长岗位职责
2015/02/15 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
创业计划书之家教中心
2019/09/25 职场文书
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL