首页
所有分类
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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
从零开始学习Node.js系列教程六：EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
vue 扩展现有组件的操作
Aug 14 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
i5 10400(1) ipad(1) Tomcat(18) win10(43) i7 6700(1) 速龙(1) 窗口函数(3) win11(40) i5 9400(1) 分析统计(1)
You might like
php实现jQuery扩展函数
2009/10/30 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
python 远程统计文件代码分享
2015/05/14 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python模糊图片过滤的方法
2018/12/14 Python
学Python 3的理由和必要性
2019/11/19 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
python中selenium库的基本使用详解
2020/07/31 Python
德国古洛迷亚百货官网：GALERIA Kaufhof
2017/06/20 全球购物
Python面试题集
2012/03/08 面试题
Java基础类库面试题
2013/09/04 面试题
注塑工厂厂长岗位职责
2013/12/02 职场文书
风险评估实施方案
2014/03/09 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
大学生应聘求职信
2014/05/26 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
Python数据类型最全知识总结
2021/05/31 Python
用Python可视化新冠疫情数据
2022/01/18 Python