以WordPress为例讲解jQuery美化页面Title的方法
这里选取的例子，便是WordPress中比较有名的美化超链接Title效果，一般的title效果是把鼠标放到a元素中便会显示一个黄底色框，而且是延时显示，这样显然不是一个好的UE，所以美化的Title便诞生了，在本站现在的主题Line的侧边栏中把鼠标放到文章标题便显示文章摘要的功能便是使用美化Title的原理做的，之所以选取这个例子，一是该例子中很好的体现了jQuery中的DOM操作，二是美化Title在WordPress中比较常用，可以供需要做美化Title的人理解其中的原理。同时因为之前对DOM和美化Title有所研究，因此这篇笔记的内容将会叙述得更加丰富！
美化Title的效果很简单，需要的是鼠标移动到超链接的那一刻就出现Title提示，当然也可以适当添加一些css作美化之用，以配合自己的主题。
首先写一段Html作为演示
<divid="newtitle"> <h2>美化Title</h2> <ul> <li><ahref="#"title="这是Title1">Title1</a></li> <li><ahref="#"title="这是Title2">Title2</a></li> <li><ahref="#"title="这是Title3">Title3</a></li> <li><ahref="#"title="这是Title4">Title4</a></li> <li><ahref="#"title="这是Title5">Title5</a></li> <li><ahref="#"title="这是Title6">Title6</a></li> <li><ahref="#"title="这是Title7">Title7</a></li> <li><ahref="#"title="这是Title8">Title8</a></li> </ul> </div>
接着我们需要完成两件事，一是当鼠标滑入超链接时创建一个内容为title内容的div，而是当鼠标滑出超链接时移除该div。
这时显然需要用到mouse方法，在这里选用mouseover与mouseout，或是mouseenter与mouseleave。说到这里小插一段，科普推广一下上面两组方法的区别：
上面两组方法的功能均是当鼠标悬停在某网页元素上时触发事件，不同的是，mouseover与mouseout会同时绑定到该元素的子元素上，因此如果一个网页元素内有多个子元素时很有可能会发生在元素上一移动鼠标就会触发事件的情况。于是从jQuery1.3开始便增加了两个新的mouse方法——mouseenter与mouseleave，使用mouseenter与mouseleave并不影响子元素。因为在上面的例子中，选取的网页元素是a标签，一般不会有子元素，所以用上面两组方法均可。
回到我们需要完成的第一步——创建div。把内容追加到文档中可以使用append()，追加的内容为超链接的title，可以直接获取title属性值，为了使追加的div显示在该超链接旁边，还可以使用css()，当然在这之前要先设置插入的div的css——position:absolute;而第二步从文档中移除元素可以使用remove()方法。具体的代码如下：
$(function(){
//为提示框预设一定的top和left值，以免提示框与超链接的距离太近
varx=15;
vary=15;
$("#newtitlea").mouseenter(function(e){
//记录title，以便下面清空title后能重新获取title的值
this.myTitle=this.title;
this.title="";
varbeatitle="<divid='beatitle'>"+this.myTitle+"</div>";
$("#newtitle").append(beatitle);
$("#beatitle")
.css({
"opacity":"0.6",
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseleave(function(){
this.title=this.myTitle;
$("#beatitle").remove();
});
})
这时美化Title的效果基本已经完成了，只要使用mousemove()方法使美化的Title跟着鼠标移动，同时可以加一段小代码使美化Title中显示超链接的URL，这个可以根据个人喜好加进去，本人个人对这个效果无爱了，喜欢的童鞋可以使用下面的完整代码！
$(function(){
varx=15;
vary=15;
//为提示框预设一定的top和left值，以免提示框与超链接的距离太近
$("#newtitlea").mouseenter(function(e){
//记录title，以便下面清空title后能重新获取title的值
this.myTitle=this.title;
this.myHref=this.href;
this.myHref=(this.myHref.length>30?this.myHref.toString().substring(0,30)+"...":this.myHref);
this.title="";
varbeatitle="<divid='beatitle'>"+this.myTitle+"<span>"+this.myHref+"</span>"+"</div>";
$("#newtitle").append(beatitle);
$("#beatitle")
.css({
"opacity":"0.6",
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseleave(function(){
this.title=this.myTitle;
$("#beatitle").remove();
}).mousemove(function(e){
$("#beatitle")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
})
具体的效果也可以看demo噢！
最后附上css，各位童鞋可以根据自己的主题修改！
body{font-size:12pt;color:#99CC33;}
h2{font-size:14pt;}
ul{list-style:none;padding:00010px;}
ulli{margin-bottom:5px;}
a{text-decoration:none;color:#99CC33;}
#beatitle{position:absolute;z-index:1000;max-width:260px;width:auto!important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
#beatitlespan{display:block;color:#FF9900;}
相信各位童鞋看了上面的原理和代码应该也猜到我的侧边栏里的摘要提示是怎么做的了！就是在超链接的title中添加内容截断了，这里跟大家分享我的截断代码，有兴趣的果断折腾吧！
<?phpechomb_strimwidth(strip_tags(apply_filters('the_content',$post->post_content)),0,240,'...');?>">
好了，我们再来更加完整地总结一下实现title提示的核心代码：
/*
调用示例：
$(document).ready(function(){
$('.quicktip').quberTip({
speed:200
});
});
<ahref=''class='quicktip'title='Informationaboutthislink'>desktoppublishing</a>
*/
jQuery.fn.quberTip=function(options){
vardefaults={
speed:500,
xOffset:10,
yOffset:10
};
varoptions=$.extend(defaults,options);
returnthis.each(function(){
var$this=jQuery(this);
if($this.attr('title')!=undefined){
//PassthetitletoavariableandthenremoveitfromDOM
if($this.attr('title')!=''){
vartipTitle=($this.attr('title'));
}else{
vartipTitle='QuberTip';
}
//Removetitleattribute
$this.removeAttr('title');
$(this).hover(function(e){
//$(this).css('cursor','pointer');
$("body").append("<divid='tooltip'>"+tipTitle+"</div>");
$("#tooltip").css({"position":"absolute",
"z-index":"9999",
"background":"#D3DDF5",
"background-image":"url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)",
"padding":"5px",
"opacity":"0.9",
"border":"1pxsolid#A3C0E8",
"-moz-border-radius":"3px",
"border-radius":"3px",
"-webkit-border-radius":"3px",
"font-weight":"normal",
"font-size":"12px",
"display":"none"
});
$("#tooltip")
.css("top",(e.pageY+defaults.xOffset)+"px")
.css("left",(e.pageX+defaults.yOffset)+"px")
.fadeIn(options.speed);
},function(){
//RemovethetooltipfromtheDOM
$("#tooltip").remove();
});
$(this).mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY+defaults.xOffset)+"px")
.css("left",(e.pageX+defaults.yOffset)+"px");
});
}
});
};