建站
咨詢
售后
建站咨詢
新聞中心
你對(duì)DIV+CSS滑動(dòng)門技術(shù)的概念和使用是否熟悉，這里和大家分享一下，其實(shí)DIV+CSS滑動(dòng)門技術(shù)是一種只需要鼠標(biāo)懸停便可自動(dòng)切換板塊的JS特效，相信本文介紹一定會(huì)讓你有所收獲。
專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)東城免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
DIV+CSS滑動(dòng)門技術(shù)簡(jiǎn)介
滑動(dòng)門是一種只需要鼠標(biāo)懸停便可自動(dòng)切換板塊的JS特效。需要說(shuō)明的是如果要減少板塊，一定要把JS特效中的相應(yīng)的板塊li的id去掉，否則無(wú)法正常顯示。比如要將第五項(xiàng)“
DIV+CSS中的滑動(dòng)門技術(shù)
美觀的工藝，真正靈活的接口組件，并根據(jù)文本自適應(yīng)大小，我們可用兩個(gè)獨(dú)立的背景圖像來(lái)創(chuàng)造它。一個(gè)在左邊，一個(gè)在右邊。把這兩幅圖像想象成兩扇可滑動(dòng)的門，它們滑到一起并交迭，占據(jù)一個(gè)較窄的空間；或者相互滑開(kāi)，占據(jù)一個(gè)較寬的空間，就像下圖所顯示的那樣：
這就是使用了DIV+CSS滑動(dòng)門技術(shù)，在這個(gè)模型中,一個(gè)圖像掩蓋住另一個(gè)圖片的一部分。假設(shè)我們放置一些獨(dú)特的內(nèi)容在每個(gè)圖像的周圍，例如標(biāo)簽的圓角，我們并不希望上面一副圖像完全的遮蔽住下面一副。為了防止這種情況的發(fā)生，我們可以將上面一副圖像（此例中的左邊那幅）控制的盡可能的窄。但仍然要保證一定的寬度來(lái)顯現(xiàn)標(biāo)簽一側(cè)的獨(dú)特性。如果外部是圓角，我們就應(yīng)該控制上面一副圖像和它的弧線部分具有一樣的寬度。
如果目標(biāo)在大小上增長(zhǎng)，并超過(guò)了以上所顯示的寬度，歸咎于文本大小及字體的改變，圖像會(huì)被拉開(kāi)，產(chǎn)生不美觀的間隙。我們需要判斷的是，預(yù)測(cè)這種可擴(kuò)展的量將有多大。如果在瀏覽器中改變字體的大小，目標(biāo)又會(huì)如果增長(zhǎng)呢？實(shí)際來(lái)說(shuō)，我們至少應(yīng)該估算到字體大小增長(zhǎng)至300%的情況。背景圖像也得適應(yīng)這種增長(zhǎng)。對(duì)于以上的例子，我們將下面（即右邊）的圖像設(shè)為400*150像素，上面的設(shè)為9*150像素。
在頭腦中，始終要有這樣的認(rèn)識(shí)：背景圖像只是顯示一個(gè)可供內(nèi)容填充的有效空間（即內(nèi)容區(qū)域和padding，稱為doorway）。這兩幅圖像始終和各自外部的邊角相錨定。背景圖像的可見(jiàn)部分和在一起即形成了一個(gè)具有這種標(biāo)簽形狀的空間（doorway）：
如果標(biāo)簽被撐大，圖像即滑開(kāi)，doorway變寬，圖像的也將被顯露的更多：
此例中，我在photoshop中制作兩個(gè)平滑，細(xì)的3D標(biāo)簽圖像，如文章開(kāi)頭所顯示的那樣。對(duì)于其一，內(nèi)部明亮，邊框暗淡些，用來(lái)表現(xiàn)當(dāng)前選中的標(biāo)簽。將這種技巧模型應(yīng)用于左右兩幅圖像中，我們需要擴(kuò)大標(biāo)簽圖像覆蓋的區(qū)域，將它裁剪成兩部分：
同樣的方式將應(yīng)用到被稱為“當(dāng)前”的標(biāo)簽中。一旦我們完成了這四幅圖像（1, 2, 3, 4），我們就可以開(kāi)始用標(biāo)記和CSS來(lái)制作我們的標(biāo)簽了，對(duì)DIV+CSS滑動(dòng)門技術(shù)就簡(jiǎn)單介紹到這里，請(qǐng)關(guān)注本文的其他相關(guān)報(bào)道。
名稱欄目：DIV+CSS滑動(dòng)門技術(shù)簡(jiǎn)介
文章轉(zhuǎn)載：http://m.fisionsoft.com.cn/article/ccocdgo.html
