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

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

今天簡單說下用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部分：

function changetext(){
    $(".neirong").text('hahaha');
}

$(function(){
$(".touxiang").hover(function(){
 timeout_name = setTimeout("changetext()",3000);
      },function(){
      clearTimeout(timeout_name) ;
      })
  })

執行可看到，我們鼠標移到頭像上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)。