名片效果實現

2022-05-15 13:57:36 字數 993 閱讀 3190

模仿qq空間、微博等滑鼠懸浮在人名上時,顯示使用者詳細資訊

大體思路是將名片卡隱藏在頁面中,當懸浮時將名片卡移動到滑鼠邊,滑鼠移開時隱藏名片卡。

本文的js使用了jquery

使用者名稱跟名片卡**如下(只是為了顯示類名,具體內容按需補充):

使用者名稱

js**如下:

var showmsgcardcontrol = null;

// 滑鼠懸浮在使用者名稱上時,顯示名片卡,並移動到滑鼠邊

$(".user-link").mouseover(function(event) ,

success: function(msg)

})});// 滑鼠離開使用者名稱一定時間後,隱藏名片卡,如果在這段時間內滑鼠移動至名片卡上,則取消隱藏,若再次離開名片卡一段時間,則隱藏名片卡

$(".user-link").mouseout(function(event) );

$(".msg-card").mouseover(function(event) );

$(".msg-card").mouseout(function(event) );

function changemsgcard(msg)

function showmsgcard(position) );

}function setshowcontrol()

function clearshowcontrol()

function hidemsgcard()

// mousecoord獲取到的座標為滑鼠尖端,各加20以避免被滑鼠擋住

function getposition(event) ;

}// 獲取當前事件(滑鼠)發生的座標

function mousecoords(event) 

;     }

// ie不支援上面的,則會執行下面的**

return ; 

};

名片效果實現

模仿qq空間 微博等滑鼠懸浮在人名上時,顯示使用者詳細資訊 大體思路是將名片卡隱藏在頁面中,當懸浮時將名片卡移動到滑鼠邊,滑鼠移開時隱藏名片卡。本文的js使用了jquery 使用者名稱跟名片卡 如下 只是為了顯示類名,具體內容按需補充 使用者名稱 js 如下 var showmsgcardcontr...

抽屜效果實現

import viewcontroller.h define maxy 60 inte ce viewcontroller property nonatomic,weak uiview mainview property nonatomic,weak uiview leftview property...

漸入效果實現

首先我們來幅 析下漸入效果的原理 由圖可以看出,整個漸入的效果分為三層,分別為 最外層 內容包裹層和內容層。其中最外層 內容包裹層和內容層三層的寬高是一致的。開始狀態下,最外層和內容包裹層均將超出的部分隱藏,這樣其實最開始的時候只能看見最外層左邊的50 和內容包裹層左邊的50 內容是完全看不見的。首...