關於蘋果底部效果,一般人肯定不會陌生,由於該效果不止在蘋果電腦上出現,在很多**都運用到了該效果.效果看起來還是比較酷炫的,當滑鼠移動過去時,會發現對應的選單會出現放大的效果.展示:
說下原理:
1.確認事件源:對應的選單按鈕,為img實現
2.確認事件屬性:onmousemove,這裡會出現誤區,因為很多人認為是當滑鼠懸浮在對應選單項上時,該選單才會發生變化,其實不然,仔細觀察可以發現,當我們的滑鼠還沒有移動上去時或者說當滑鼠距離某些選單項足夠近的時候,對應的選單項會逐步出現放大效果.因為我們選定事件屬性為滑鼠移動事件
3.確認事件變化屬性:這個很簡單,就是對應的選單項放大.但是這裡有個坑需要跳過去,當滑鼠距離多個選單項都比較近時,那麼這幾個選單項都會出現放大效果,而且放大的倍數都不相同,要想實現這個效果,其實得運用到勾股定理.就是曾經的直角三角形a*a+b*b=c*c,我們可以設想a值為滑鼠位置,b值為選單項中心位置,那麼我們需要求出滑鼠距離選單項中心的直線距離c,c值越小,說明滑鼠位置距離b越近.然後我們可以通過c值計算乙個比例與選單的寬度相乘,最終就實現了蘋果底部選單效果
**如下:
名片效果實現
模仿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 內容是完全看不見的。首...