如何解決傾斜鼠標(biāo)翻轉(zhuǎn)導(dǎo)航的問題

小編給大家分享一下如何解決傾斜鼠標(biāo)翻轉(zhuǎn)導(dǎo)航的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　前天網(wǎng)上有個(gè)朋友發(fā)給我一個(gè)頁面讓我?guī)退匆幌聻槭裁词髽?biāo)翻轉(zhuǎn)實(shí)現(xiàn)不了。我打開源文件看了一下，發(fā)現(xiàn)作者根本沒有掌握一個(gè)鼠標(biāo)翻轉(zhuǎn)的特性。并且對(duì)于傾斜導(dǎo)航的思考也不足。雖然我當(dāng)時(shí)看出來了這些問題，但是由于手上一個(gè)項(xiàng)目正在收尾一時(shí)也沒有時(shí)間向她一個(gè)講解。正好昨天工作忙完了，現(xiàn)在又拿起那個(gè)文件看了一下，發(fā)現(xiàn)通過這個(gè)事件可以講解好多個(gè)知識(shí)點(diǎn)，有一些地方比較容易讓人不太注意，但是確實(shí)是非常關(guān)鍵的。
　　我們先看一下想要實(shí)現(xiàn)的效果，當(dāng)然在沒做之前這些只能是存在于我們的腦子或是草圖上。我們首先要想到它是個(gè)什么樣子，然后才能去分析我們想要實(shí)理的效果是應(yīng)該如何去做，閑言少敘，先看圖：
　　
　　我們看到上圖，可以會(huì)覺得好像并沒什么，好像很容易做。好我們來細(xì)細(xì)的分析一下這個(gè)效果。我們用標(biāo)準(zhǔn)來實(shí)現(xiàn)就不能直接插入一張圖片在HTML里。用標(biāo)準(zhǔn)來做就需要把圖片作為背景的方式用CSS進(jìn)行調(diào)用。那么我們來看一下這樣的導(dǎo)航是否可以直接就那么直接調(diào)用，其中是不是還有什么問題出現(xiàn)?下面請(qǐng)看一下這個(gè)導(dǎo)航效果的放大圖：
　　
　　
　　大家注意上圖中的“危險(xiǎn)區(qū)”很明顯，如果我們把兩個(gè)傾斜的正塊放在一起就必然會(huì)有一段重復(fù)區(qū)，我們現(xiàn)在的CSS還不支持異形處理。要解決這個(gè)問題就必需要使得這兩個(gè)方塊進(jìn)行重疊。重疊就需要把他們放在不同的層次上。這就要用到CSS中的定位：“position : static | absolute | fixed | relative ”。
　　做鼠標(biāo)翻轉(zhuǎn)我們通常會(huì)把所有的背景做成一個(gè)圖，然后通過CSS來設(shè)置不同標(biāo)簽下的圖片的不同位置。也許有人就會(huì)認(rèn)為這個(gè)導(dǎo)航的背景圖應(yīng)該是這樣的：
　　
　　如果你真的是這么想的那么問題就出來了：當(dāng)在五個(gè)區(qū)塊中的任一個(gè)區(qū)塊中進(jìn)行鼠標(biāo)翻轉(zhuǎn)時(shí)，上面的危險(xiǎn)區(qū)的重復(fù)部位就會(huì)把左側(cè)和是右側(cè)的導(dǎo)航擋去一個(gè)角。所以正常的方式是：
　　
　　
　　只有這樣在沒有危險(xiǎn)區(qū)的情況下才能作為最終的背景圖片使用。當(dāng)然還要注意的是背景并不是白色而是透明的，主要不是為了與網(wǎng)站的背景融合，關(guān)鍵是不要擋住在危險(xiǎn)區(qū)的相鄰的背景。我使用的是GIF圖，GIF圖有透明的時(shí)候邊緣會(huì)有一點(diǎn)毛邊。如果希望應(yīng)對(duì)不同的色彩的網(wǎng)站背景，最好使用PNG或是把GIF圖的邊緣做成點(diǎn)像素。
　　對(duì)于這個(gè)背景圖的思考完成之后我們就需要想想怎么制作這個(gè)導(dǎo)航了。先來分析一下這個(gè)鼠標(biāo)翻轉(zhuǎn)，原來做鼠標(biāo)翻轉(zhuǎn)是JS的事，現(xiàn)在可以通過CSS的：hover也可以實(shí)現(xiàn)這個(gè)翻轉(zhuǎn)效果，代碼少、結(jié)構(gòu)清晰。所以這里這五個(gè)導(dǎo)航的翻轉(zhuǎn)就是由A:hover來實(shí)現(xiàn)。

以上是“如何解決傾斜鼠標(biāo)翻轉(zhuǎn)導(dǎo)航的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！