這里選取的例子，便是 WordPress 中比較有名的美化超鏈接Title效果，一般的 title 效果是把鼠標放到 a 元素中便會顯示一個黃底色框，而且是延時顯示，這樣顯然不是一個好的 UE ，所以美化的 Title 便誕生了，在本站現在的主題 Line 的側邊欄中把鼠標放到文章標題便顯示文章摘要的功能便是使用美化 Title 的原理做的，之所以選取這個例子，一是該例子中很好的體現了 jQuery 中的 DOM 操作，二是美化 Title 在 WordPress 中比較常用，可以供需要做美化 Title 的人理解其中的原理。同時因為之前對 DOM 和美化 Title 有所研究，因此這篇筆記的內容將會敘述得更加豐富！
美化 Title 的效果很簡單，需要的是鼠標移動到超鏈接的那一刻就出現 Title 提示，當然也可以適當添加一些css作美化之用，以配合自己的主題。
首先寫一段 Html 作為演示
<div id="newtitle"> <h2>美化Title</h2> <ul> <li><a href="#" title="這是Title1">Title1</a></li> <li><a href="#" title="這是Title2">Title2</a></li> <li><a href="#" title="這是Title3">Title3</a></li> <li><a href="#" title="這是Title4">Title4</a></li> <li><a href="#" title="這是Title5">Title5</a></li> <li><a href="#" title="這是Title6">Title6</a></li> <li><a href="#" title="這是Title7">Title7</a></li> <li><a href="#" title="這是Title8">Title8</a></li> </ul></div>
接著我們需要完成兩件事，一是當鼠標滑入超鏈接時創建一個內容為 title 內容的 div ，而是當鼠標滑出超鏈接時移除該 div 。
這時顯然需要用到 mouse 方法，在這里選用 mouseover 與 mouseout ，或是 mouseenter 與 mouseleave 。說到這里小插一段，科普推廣一下上面兩組方法的區別：
上面兩組方法的功能均是當鼠標懸停在某網頁元素上時觸發事件，不同的是， mouseover 與 mouseout 會同時綁定到該元素的子元素上，因此如果一個網頁元素內有多個子元素時很有可能會發生在元素上一移動鼠標就會觸發事件的情況。于是從 jQuery 1.3 開始便增加了兩個新的 mouse 方法―― mouseenter 與 mouseleave ，使用 mouseenter 與 mouseleave 并不影響子元素。因為在上面的例子中，選取的網頁元素是 a 標簽，一般不會有子元素，所以用上面兩組方法均可。
回到我們需要完成的第一步――創建 div 。把內容追加到文檔中可以使用 append() ，追加的內容為超鏈接的 title ，可以直接獲取 title 屬性值，為了使追加的 div 顯示在該超鏈接旁邊，還可以使用 css() ，當然在這之前要先設置插入的 div 的 css ―― position: absolute; 而第二步從文檔中移除元素可以使用 remove() 方法。具體的代碼如下：
$(function(){ //為提示框預設一定的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 的效果基本已經完成了，只要使用 mousemove() 方法使美化的 Title 跟著鼠標移動，同時可以加一段小代碼使美化 Title 中顯示超鏈接的 URL ，這個可以根據個人喜好加進去，本人個人對這個效果無愛了，喜歡的童鞋可以使用下面的完整代碼！
$(function(){ var x = 15; var y = 15; //為提示框預設一定的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 ，各位童鞋可以根據自己的主題修改！
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; }
相信各位童鞋看了上面的原理和代碼應該也猜到我的側邊欄里的摘要提示是怎么做的了！就是在超鏈接的 title 中添加內容截斷了，這里跟大家分享我的截斷代碼，有興趣的果斷折騰吧！
/*調用示例：$(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"); }); } });};新聞熱點
疑難解答
