鼠標移動到超鏈接時顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁面Title的方法,需要的朋友可以參考下
這里選取的例子，便是 WordPress 中比較有名的美化超鏈接Title效果，一般的 title 效果是把鼠標放到 a 元素中便會顯示一個黃底色框，而且是延時顯示，這樣顯然不是一個好的 UE ，所以美化的 Title 便誕生了，在本站現(xiàn)在的主題 Line 的側(cè)邊欄中把鼠標放到文章標題便顯示文章摘要的功能便是使用美化 Title 的原理做的，之所以選取這個例子，一是該例子中很好的體現(xiàn)了 jQuery 中的 DOM 操作，二是美化 Title 在 WordPress 中比較常用，可以供需要做美化 Title 的人理解其中的原理。同時因為之前對 DOM 和美化 Title 有所研究，因此這篇筆記的內(nèi)容將會敘述得更加豐富！
美化 Title 的效果很簡單，需要的是鼠標移動到超鏈接的那一刻就出現(xiàn) Title 提示，當然也可以適當添加一些css作美化之用，以配合自己的主題。
首先寫一段 Html 作為演示
<div id="newtitle">
<h2>美化Title</h2>
<ul>
<li><a href="#">Title1</a></li>
<li><a href="#">Title2</a></li>
<li><a href="#">Title3</a></li>
<li><a href="#">Title4</a></li>
<li><a href="#">Title5</a></li>
<li><a href="#">Title6</a></li>
<li><a href="#">Title7</a></li>
<li><a href="#">Title8</a></li>
</ul>
</div>
接著我們需要完成兩件事，一是當鼠標滑入超鏈接時創(chuàng)建一個內(nèi)容為 title 內(nèi)容的 div ，而是當鼠標滑出超鏈接時移除該 div 。
這時顯然需要用到 mouse 方法，在這里選用 mouseover 與 mouseout ，或是 mouseenter 與 mouseleave 。說到這里小插一段，科普推廣一下上面兩組方法的區(qū)別：
上面兩組方法的功能均是當鼠標懸停在某網(wǎng)頁元素上時觸發(fā)事件，不同的是， mouseover 與 mouseout 會同時綁定到該元素的子元素上，因此如果一個網(wǎng)頁元素內(nèi)有多個子元素時很有可能會發(fā)生在元素上一移動鼠標就會觸發(fā)事件的情況。于是從 jQuery 1.3 開始便增加了兩個新的 mouse 方法—— mouseenter 與 mouseleave ，使用 mouseenter 與 mouseleave 并不影響子元素。因為在上面的例子中，選取的網(wǎng)頁元素是 a 標簽，一般不會有子元素，所以用上面兩組方法均可。
回到我們需要完成的第一步——創(chuàng)建 div 。把內(nèi)容追加到文檔中可以使用 append() ，追加的內(nèi)容為超鏈接的 title ，可以直接獲取 title 屬性值，為了使追加的 div 顯示在該超鏈接旁邊，還可以使用 css() ，當然在這之前要先設(shè)置插入的 div 的 css —— position: absolute; 而第二步從文檔中移除元素可以使用 remove() 方法。具體的代碼如下：
$(function(){
//為提示框預(yù)設(shè)一定的top和left值，以免提示框與超鏈接的距離太近
var x = 15;
var y = 15;
$("#newtitle a").mouseenter(function(e){
//記錄title，以便下面清空title后能重新獲取title的值
this.myTitle = this.title;
this.title = "";
var beatitle = "<div id='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 的效果基本已經(jīng)完成了，只要使用 mousemove() 方法使美化的 Title 跟著鼠標移動，同時可以加一段小代碼使美化 Title 中顯示超鏈接的 URL ，這個可以根據(jù)個人喜好加進去，本人個人對這個效果無愛了，喜歡的童鞋可以使用下面的完整代碼！
$(function(){
var x = 15;
var y = 15;
//為提示框預(yù)設(shè)一定的top和left值，以免提示框與超鏈接的距離太近
$("#newtitle a").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 = "";
var beatitle = "<div id='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 ，各位童鞋可以根據(jù)自己的主題修改！
body {font-size: 12pt; color: #99CC33; }
h2 {font-size: 14pt; }
ul {list-style: none; padding: 0 0 0 10px;}
ul li {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; }
#beatitle span {display: block; color: #FF9900; }
相信各位童鞋看了上面的原理和代碼應(yīng)該也猜到我的側(cè)邊欄里的摘要提示是怎么做的了！就是在超鏈接的 title 中添加內(nèi)容截斷了，這里跟大家分享我的截斷代碼，有興趣的果斷折騰吧！
代碼如下:
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 240,'...'); ?>">
好了，我們再來更加完整地總結(jié)一下實現(xiàn)title提示的核心代碼：
/*
調(diào)用示例：
$(document).ready(function(){
$('.quicktip').quberTip({
speed:200
});
});
<a href='' class='quicktip' title='Information about this link'>desktop publishing</a>
*/
jQuery.fn.quberTip = function (options) {
var defaults = {
speed: 500,
xOffset: 10,
yOffset: 10
};
var options = $.extend(defaults, options);
return this.each(function () {
var $this = jQuery(this);
if ($this.attr('title') != undefined) {
//Pass the title to a variable and then remove it from DOM
if ($this.attr('title') != '') {
var tipTitle = ($this.attr('title'));
} else {
var tipTitle = 'QuberTip';
}
//Remove title attribute
$this.removeAttr('title');
$(this).hover(function (e) {
// $(this).css('cursor', 'pointer');
$("body").append("<div id='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": "1px solid #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 () {
//Remove the tooltip from the DOM
$("#tooltip").remove();
});
$(this).mousemove(function (e) {
$("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
.css("left", (e.pageX + defaults.yOffset) + "px");
});
}
});
};