如何解決傾斜鼠標(biāo)翻轉(zhuǎn)導(dǎo)航的問(wèn)題-創(chuàng)新互聯(lián)

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

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

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

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


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

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


只有這樣在沒(méi)有危險(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)航了。先來(lái)分析一下這個(gè)鼠標(biāo)翻轉(zhuǎn)，原來(lái)做鼠標(biāo)翻轉(zhuǎn)是JS的事，現(xiàn)在可以通過(guò)CSS的：hover也可以實(shí)現(xiàn)這個(gè)翻轉(zhuǎn)效果，代碼少、結(jié)構(gòu)清晰。所以這里這五個(gè)導(dǎo)航的翻轉(zhuǎn)就是由A:hover來(lái)實(shí)現(xiàn)。

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

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

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

廣告

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