傾斜滑鼠翻轉導航的問題研究

來源:互聯網
上載者:User

  本文中我們通過製作一個傾斜的 滑鼠翻轉導航為例分析一下,希望可以協助一些對於滑鼠翻轉導航製作上還存在疑問的朋友。

  前天網上有個朋友發給我一個頁面讓我幫她看一下為什麼滑鼠翻轉實現不了。我開啟源檔案看了一下,發現作者根本沒有掌握一個滑鼠翻轉的特性。並且對於傾斜導航的思考也不足。雖然我當時看出來了這些問題,但是由於手上一個項目正在收尾一時也沒有時間向她一個講解。正好昨天工作忙完了,現在又拿起那個檔案看了一下,發現通過這個事件可以講解好多個知識點,有一些地方比較容易讓人不太注意,但是確實是非常關鍵的。

  我們先看一下想要實現的效果,當然在沒做之前這些只能是存在於我們的腦子或是草圖上。我們首先要想到它是個什麼樣子,然後才能去分析我們想要實理的效果是應該如何去做,閑言少敘,先看圖:

  

  我們看到上圖,可以會覺得好像並沒什麼,好像很容易做。好我們來細細的分析一下這個效果。我們用標準來實現就不能直接插入一張圖片在HTML裡。用標準來做就需要把圖片作為背景的方式用CSS進行調用。那麼我們來看一下這樣的導航是否可以直接就那麼直接調用,其中是不是還有什麼問題出現?下面請看一下這個導航效果的放大圖:

  

  

  大家注意上圖中的“危險區”很明顯,如果我們把兩個傾斜的正塊放在一起就必然會有一段重複區,我們現在的CSS還不支援異形處理。要解決這個問題就必需要使得這兩個方塊進行重疊。重疊就需要把他們放在不同的層次上。這就要用到CSS中的定位:“position : static absolute fixed relative ”。

  做滑鼠翻轉我們通常會把所有的背景做成一個圖,然後通過CSS來設定不同標籤下的圖片的不同位置。也許有人就會認為這個導航的背景圖應該是這樣的:

  

  如果你真的是這麼想的那麼問題就出來了:當在五個區塊中的任一個區塊中進行滑鼠翻轉時,上面的危險區的重複部位就會把左側和是右側的導航擋去一個角。所以正常的方式是:

  

  

  只有這樣在沒有危險區的情況下才能作為最終的背景圖片使用。當然還要注意的是背景並不是白色而是透明的,主要不是為了與網站的背景融合,關鍵是不要擋住在危險區的相鄰的背景。我使用的是GIF圖,GIF圖有透明的時候邊緣會有一點毛邊。如果希望應對不同的色彩的網站背景,最好使用PNG或是把GIF圖的邊緣做成點像素。

  對於這個背景圖的思考完成之後我們就需要想想怎麼製作這個導航了。先來分析一下這個滑鼠翻轉,原來做滑鼠翻轉是JS的事,現在可以通過CSS的:hover也可以實現這個翻轉效果,代碼少、結構清晰。所以這裡這五個導航的翻轉就是由A:hover來實現。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。