知乎網首頁乙個延時互動的小思路

2022-01-16 11:42:04 字數 1128 閱讀 6272

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

今天簡單說下用jq完成這個互動的思路。先照例寫下html/css,整倆div分別作為頭像元素和內容區域元素:

<

div

class

="touxiang"

>這裡是頭像

div>

<

div

class

="neirong"

>這裡是內容區域

div>

接下來是jq部分:

1

function

changetext()

45 $(function

(),function

())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)。

逛知乎,記乙個演算法的題目

知乎鏈結是 題目資訊 一副從1到n的牌,每次從牌堆頂取一張放桌子上,再取一張放牌堆底,直到手裡沒牌,最後桌子上的牌是從1到n有序,設計程式,輸入n,輸出牌堆的順序陣列 發現題目比較有意思,小時候還真這麼玩過,當時也是一張一張的試出來,然後秀給小夥伴們看,拿到題目自己就琢磨的開始寫 static vo...

知乎上關於祖傳的乙個回覆

祖傳的它為什麼好啊?祖傳的它禁得起考驗啊!你比方說,過年了,放鞭炮,它祖傳的吧?祖傳的啊!祖傳的好啊!一點,呲啦,砰!多喜慶!你說是不是?為什麼不拿黃色炸藥造鞭炮?為啥不拿tnt造鞭炮?為啥不拿濃縮鈾造鞭炮?因為鞭炮那是祖傳的啊!老祖宗發明的,祖祖輩輩傳下來的啊!可靠!不光可靠,那還是驕傲,用了那叫...

知乎上看到乙個關注軟體測試的問答,太直接了

我比較贊同前者 0 這個其實很正常。國內國外國情不同。我舉幾個例子打假就知道了。國外 可以有很多鑽研軟體測試直到60,70歲的。他們善於鑽研軟體設計,善於總結,並且能夠最終能夠發布一套自己領悟出來的設計方法。並造福於各個個人,企業,領域。國內 對於軟體測試的認知的錯誤,越來越多的年輕人湧入這個圈子。...