突发奇想的一个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.jb51.net/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>

时间: 2024-09-14 15:58:44

突发奇想的一个jquery插件_jquery的相关文章

长时间的接触网站,突发奇想建立一个属于自己的网站

我是一个企业网站的站长,长时间的接触网站,突发奇想建立一个属于自己的网站,用于SEO技巧的测试.对于一个从来没有接触过编程的我,就开始了艰辛的历程. 域名注册对SEO复杂心情 首先选择域名,因为对域名的了解不是很多,在博客网站没有定位好的时候就选择了一个域名注册了,域名地址为,意思是我的妈妈一生一世幸福快乐的意思.然而域名注册之后,发现建一个关于妈妈的感情及相关信息的博客,资源有限,关键词定位不好定,最后又回到了与我一直朝夕相伴的企业网站上. 服务器空间的曲折路线 由于国内服务器需要备-案,大约

《JavaScript高效图形编程(修订版)》——2.2 转为一个jQuery插件

2.2 转为一个jQuery插件 将bouncySprite转为一个jQuery插件,可以利用jQuery通过CSS选择器搜索并返回DOM 元素列表的能力.这个插件可以搜索任何元素并用 bouncyBoss 给它附上多个bouncySprite实例,并可以改变附加的实例个数和背景颜色. 将bouncySprite转为一个灵活的jQuery插件,实际没有想象得那么难.因为DHTMLSprite.bouncySprite和bouncyBoss对象是以模块化方式开发的,可以很顺利地转为jQuery插件

2014年50个程序员最适用的免费JQuery插件_jquery

有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎可以解决一个网站所有的问题它可以从做一个有吸引力和创意的网站解决所有那些阻碍你的问题如果你想解决任何跨浏览器的问题,那就必须收藏使用JavaScript函数库 jQuery库是Web开发人员的重要来源.你会发现很多互联网的jQuery插件都是免费使用的,但发现这些优秀的jQuery插件,需要你花费许

分享20个提升网站界面体验的jQuery插件_jquery

jQuery到目前为止还是非常流行,很多用户喜欢使用jQuery插件加进自己的网站上提升界面及交互性能,这是好的,但我发现很多网站使用的插件还是比较旧,而这点就不太好了,是应该要换换"新款"啦! 随便Web技术不停的进步,很多新鲜.创新并且实用的jQuery插件已经开发出来,大家应该多点关注这方面的资讯. 今天为大家整理20个提升网站界面的体验的jQuery插件,这些都是比较"新款"的代码,喜欢的请用到你的网站项目上吧! Card 友好的信用卡表单插件,模拟真实的信

Web开发者必备的12款超赞jQuery插件_jquery

现在的jQuery插件很多,尽可以根据您 的项目要求来选择,不过也有一些插件很好用,几乎各种项目都能够用得上.这里就为您介绍12款开发中最常用的jQuery插件. 1. jQuery BBCode Editor 下载地址:http://www.w3theme.com/jquery-bbedit/ Bbcode简单易用,它是BBS.论坛.Blog等网络应用上的一种常用输入语法.jQuery BbCode Editor提供自定义设置,可以打造出很个性化的bbcode编辑器,它的源代码都可以根据需求灵

jquery.lazyload 实现图片延迟加载jquery插件_jquery

什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil

input 和 textarea 输入框最大文字限制的jquery插件_jquery

复制代码 代码如下: /* input 和 textarea 最大文字限定插件 * 修改版, 一个中文表示1一个字, 一个英文半个字; * TextLimit - jQuery plugin for counting and limiting characters for input and textarea fields * * pass '-1' as speed if you don't want the char-deletion effect. (don't just put 0) *

Lazy Load 延迟加载图片的 jQuery 插件_jquery

怎样使用? Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域: 复制代码 代码如下:      <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> 并且在你

文本框的字数限制功能jquery插件_jquery

后来在网上闲逛的时候突然发现一个比较好的文本框的字数限制的jquery plugin,简单好用效果如下图 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999