傾斜鼠標(biāo)翻轉(zhuǎn)導(dǎo)航的問(wèn)題研究

2024-08-30 08:33:55

字體：大中小

供稿：網(wǎng)友

　　本文中我們通過(guò)制作一個(gè)傾斜的鼠標(biāo)翻轉(zhuǎn)導(dǎo)航為例分析一下，希望可以幫助一些對(duì)于鼠標(biāo)翻轉(zhuǎn)導(dǎo)航制作上還存在疑問(wèn)的朋友。
　　前天網(wǎng)上有個(gè)朋友發(fā)給我一個(gè)頁(yè)面讓我?guī)退匆幌聻槭裁词髽?biāo)翻轉(zhuǎn)實(shí)現(xiàn)不了。我打開(kāi)源文件看了一下，發(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)。

上一篇：網(wǎng)頁(yè)改版是家家難念的經(jīng)

下一篇：網(wǎng)頁(yè)設(shè)計(jì):當(dāng)標(biāo)題不能顯示完整的時(shí)候