知乎網首頁一個延時交互的小思路

知乎首頁有個交互還蠻有意思，當用戶在左側頭像區選擇某個頭像的時候，右側內容區域會依據鼠標在頭像所留經的時間來決定是否顯示所停留頭像的對應內容：

今天簡單說下用JQ完成這個交互的思路。先照例寫下HTML/CSS，整倆div分別做爲頭像元素和內容區域元素：

  <div class="touxiang">這裏是頭像</div>
  <div class="neirong">這裏是內容區域</div>

<style type="text/css">
body{
    margin:50px;
    }
.touxiang{
    border:1px solid #E5D1A1; text-align:center; width:150px; height:150px; background:#FFFDD2; float:left;
    }
.neirong{
    width:300px;height:500px; margin-left:30px;border:1px solid #E5D1A1;background:#fff;float:left;
    }
</style>

接下來是JQ部分：

 1 function changetext(){
 2     $(".neirong").text('hahaha');
 3 }
 4 
 5 $(function(){
 6 $(".touxiang").hover(function(){
 7  timeout_name = setTimeout("changetext()",3000);
 8       },function(){
 9       clearTimeout(timeout_name) ;
10       })
11   })

執行可看到，咱們鼠標移到頭像上3秒後，則內容區域內容變爲「hahaha」，若在3秒內把鼠標移出頭像，則內容區域內容不變。

這種效果說白了是利用.hover()來定義「鼠標通過」和「鼠標離開」頭像div時所執行的事件。

如上述代碼，若鼠標移到頭像div上，則利用setTimeout函數來延時3秒調用changetext()函數，從而讓內容區域在3秒後改變起內容；
而當鼠標離開了頭像div，則利用clearTimeout函數清空對應的延時操做。

注意setTimeout所調用的函數做用域必須是全局性的，因此對changetext()函數的聲明定義須要寫在$(function(){...})外部。

方法仍是比較簡單的，這裏只寫了一個頭像作示範，像知乎首頁多頭像效果也不外乎鏈接數據庫，因爲數據庫裏頭像ID字段和內容區域內容的TXID字段是關聯的，如數據庫ID字段爲「101」的頭像,其div的id可設爲id="tx101"，並將其對應區域內容從數據庫提取且賦值給變量nr101;再綁定hover事件讓鼠標通過$("#tx101")的時候內容區域.text(nr101)。