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

創(chuàng)新互聯(lián)建站自2013年創(chuàng)立以來，先為且末等服務(wù)建站，且末等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為且末企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

前天網(wǎng)上有個朋友發(fā)給我一個頁面讓我?guī)退匆幌聻槭裁词髽?biāo)翻轉(zhuǎn)實(shí)現(xiàn)不了。我打開源文件看了一下，發(fā)現(xiàn)作者根本沒有掌握一個鼠標(biāo)翻轉(zhuǎn)的特性。并且對于傾斜導(dǎo)航的思考也不足。雖然我當(dāng)時看出來了這些問題，但是由于手上一個項目正在收尾一時也沒有時間向她一個講解。正好昨天工作忙完了，現(xiàn)在又拿起那個文件看了一下，發(fā)現(xiàn)通過這個事件可以講解好多個知識點(diǎn)，有一些地方比較容易讓人不太注意，但是確實(shí)是非常關(guān)鍵的。
我們先看一下想要實(shí)現(xiàn)的效果，當(dāng)然在沒做之前這些只能是存在于我們的腦子或是草圖上。我們首先要想到它是個什么樣子，然后才能去分析我們想要實(shí)理的效果是應(yīng)該如何去做，閑言少敘，先看圖：

我們看到上圖，可以會覺得好像并沒什么，好像很容易做。好我們來細(xì)細(xì)的分析一下這個效果。我們用標(biāo)準(zhǔn)來實(shí)現(xiàn)就不能直接插入一張圖片在HTML里。用標(biāo)準(zhǔn)來做就需要把圖片作為背景的方式用CSS進(jìn)行調(diào)用。那么我們來看一下這樣的導(dǎo)航是否可以直接就那么直接調(diào)用，其中是不是還有什么問題出現(xiàn)?下面請看一下這個導(dǎo)航效果的放大圖：


大家注意上圖中的“危險區(qū)”很明顯，如果我們把兩個傾斜的正塊放在一起就必然會有一段重復(fù)區(qū)，我們現(xiàn)在的CSS還不支持異形處理。要解決這個問題就必需要使得這兩個方塊進(jìn)行重疊。重疊就需要把他們放在不同的層次上。這就要用到CSS中的定位：“position : static | absolute | fixed | relative ”。
做鼠標(biāo)翻轉(zhuǎn)我們通常會把所有的背景做成一個圖，然后通過CSS來設(shè)置不同標(biāo)簽下的圖片的不同位置。也許有人就會認(rèn)為這個導(dǎo)航的背景圖應(yīng)該是這樣的：

如果你真的是這么想的那么問題就出來了：當(dāng)在五個區(qū)塊中的任一個區(qū)塊中進(jìn)行鼠標(biāo)翻轉(zhuǎn)時，上面的危險區(qū)的重復(fù)部位就會把左側(cè)和是右側(cè)的導(dǎo)航擋去一個角。所以正常的方式是：


只有這樣在沒有危險區(qū)的情況下才能作為最終的背景圖片使用。當(dāng)然還要注意的是背景并不是白色而是透明的，主要不是為了與網(wǎng)站的背景融合，關(guān)鍵是不要擋住在危險區(qū)的相鄰的背景。我使用的是GIF圖，GIF圖有透明的時候邊緣會有一點(diǎn)毛邊。如果希望應(yīng)對不同的色彩的網(wǎng)站背景，好使用PNG或是把GIF圖的邊緣做成點(diǎn)像素。
對于這個背景圖的思考完成之后我們就需要想想怎么制作這個導(dǎo)航了。先來分析一下這個鼠標(biāo)翻轉(zhuǎn)，原來做鼠標(biāo)翻轉(zhuǎn)是JS的事，現(xiàn)在可以通過CSS的：hover也可以實(shí)現(xiàn)這個翻轉(zhuǎn)效果，代碼少、結(jié)構(gòu)清晰。所以這里這五個導(dǎo)航的翻轉(zhuǎn)就是由A:hover來實(shí)現(xiàn)。

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

網(wǎng)頁題目：如何解決傾斜鼠標(biāo)翻轉(zhuǎn)導(dǎo)航的問題-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://chinadenli.net/article4/hehie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、外貿(mào)建站、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)