快捷導(dǎo)航

WordPress中鼠標(biāo)懸停顯示和隱藏評(píng)論及引用按鈕的實(shí)現(xiàn)

更新時(shí)間：2016年01月12日 15:05:41 作者：稍息少年

這篇文章主要介紹了WordPress中鼠標(biāo)懸停顯示和隱藏評(píng)論及引用按鈕的實(shí)現(xiàn),順帶顯示和隱藏評(píng)論者信息的實(shí)現(xiàn)方法,非常實(shí)用,需要的朋友可以參考下

根據(jù)鼠標(biāo)懸停顯示、隱藏，回復(fù)和引用按鈕
思路及原理
原理嘛很簡單，如果你閱讀過一頁或者兩頁甚至更多頁 Jquery 手冊的話，
那么下面的原理解釋你肯定能看懂，否則請?zhí)链a實(shí)現(xiàn)區(qū)域閱讀。
思路很簡單，

將回復(fù)、引用按鈕放置在你想要的地方，CSS 樣式設(shè)置 display:none;
綁定Jquery中的hover動(dòng)作到你想要鼠標(biāo)懸停后顯示按鈕的區(qū)域
是不是很簡單？要是我以前寫博客肯定會(huì)就此結(jié)束，
好吧，既然授人魚那么繼續(xù)…….

特效的代碼實(shí)現(xiàn)部分
回復(fù)、引用的HTML代碼

復(fù)制代碼代碼如下:

回復(fù)、引用的CSS樣式設(shè)置

   .comment-act{display:none;}
Jquery（ Javascript ） 代碼部分
注：li.comment 是我每一條評(píng)論所在的區(qū)域
   $('li.comment').hover(//注1
 function(){
 $(this).find('div.comment-act').fadeIn(400);
 },
 function(){
 $(this).find('div.comment-act').fadeOut(400);
 });

特效的代碼的加強(qiáng)、進(jìn)階擴(kuò)展
Jquery 特效的制作往往會(huì)碰到這么一種情況，
就是有一些極端的用戶，會(huì)不停的在兩個(gè)有懸停動(dòng)畫特效的區(qū)域不停來回切換（搞測試？），
因?yàn)槲覀兊奶匦э@示一般都會(huì)設(shè)定一個(gè)顯示時(shí)間，在這里我們設(shè)定了400毫秒，
很明顯，用戶的鼠標(biāo)來回切換一次也就100毫秒左右，甚至更少，
不停的來回切換往往就會(huì)生成一個(gè)動(dòng)畫隊(duì)列，即使你鼠標(biāo)不動(dòng)了，
特效還會(huì)按照你鼠標(biāo)之前發(fā)生過的動(dòng)作不停隱藏、顯示，直至響應(yīng)完你最后一次鼠標(biāo)動(dòng)作，
雖然我說的這種情況不太多見，但是如果我們的評(píng)論條數(shù)很多，
而訪客又不停的上下滑動(dòng)鼠標(biāo)翻查內(nèi)容，是不是很容易出現(xiàn)這種情況？
是不是很煩？
不但很煩，還會(huì)加重客戶端瀏覽器負(fù)載，影響網(wǎng)站效率，更是不好的用戶體驗(yàn)。
問題解決其實(shí)很簡單，利用hover的回調(diào)函數(shù)參數(shù)終止動(dòng)畫隊(duì)列，

   $('li.comment').hover(//注1
 function(){
 $(this).find('div.comment-act').fadeIn(400);
 },
 function(){
 $(this).find('div.comment-act').fadeOut(400,function(){$(this).stop(true);});
 });

因?yàn)槲覀冊谝瞥鍪髽?biāo)的時(shí)候是想停止所有的動(dòng)畫顯示，
所以我們在鼠標(biāo)移出隱藏掉回復(fù)、引用按鈕之后終止掉該區(qū)域的動(dòng)畫隊(duì)列。
實(shí)測，目前為止MG12的博客未對此種情況做處理（懶？沒必要？）。
你可以拿他的博客作為對比，呵呵！
注1：hover是一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對象上面及移出這個(gè)對象）的方法。這是一個(gè)自定義的方法，
它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。
當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)。當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。

顯示、隱藏評(píng)論者信息
這個(gè)功能很多主題都有，旨在減小頁面篇幅、提高用戶體驗(yàn)，我的這個(gè)主題本來也是預(yù)留了這個(gè)功能，但是因?yàn)楸扇藨兴砸恢睕]有改造。最近這陣子小恙再加上本來也懶所以也一直沒有折騰博客，覺得再不折騰折騰博客興許就這么閑下來了。

望高手指正
JS代碼如下：

 var cmtinfo = jQuery('#cmtinfo');
if (cmtinfo.length>0){
var hideinfo = cmtinfo.find('#hide_author_info');
var showinfo = cmtinfo.find('#show_author_info');
var authorinfo = jQuery('#author_info');
authorinfo.hide();
showinfo.click(function(){jQuery(this).fadeOut(function(){hideinfo.fadeIn();});authorinfo.fadeIn();});
hideinfo.click(function(){jQuery(this).fadeOut(function(){showinfo.fadeIn();});authorinfo.fadeOut();});
}

#cmtinfo 是有信息的訪客所顯示訪客新的一個(gè) DIV

#hide_author_info、#show_author_info 一個(gè)是隱藏按鈕一個(gè)是顯示按鈕

#author_info 是 #cmtinfo 的一個(gè)子 DIV

您可能感興趣的文章: