|
作者的BLOG：http://www.planabc.net/
地圖彈窗（map pop）具體演示
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
這個(gè)實(shí)例，基本上是應(yīng)用hover來(lái)實(shí)現(xiàn)隱藏/顯示效果。
實(shí)例初始部分內(nèi)容被隱藏，當(dāng)hover時(shí)讓其隱藏的內(nèi)容顯示。對(duì)于初始的隱藏我們可以通過(guò)，對(duì)父元素設(shè)置相對(duì)位置（position : relative;），對(duì)其要隱藏的子元素設(shè)置絕對(duì)位置（position : absolute;），然后對(duì)要隱藏的子元素設(shè)置margin屬性，并給于無(wú)限大負(fù)值讓其移動(dòng)無(wú)限遠(yuǎn)隱藏，而當(dāng)hover觸發(fā)時(shí)，通過(guò)對(duì)隱藏的子元素重新設(shè)置margin值讓其顯示。對(duì)于圖片中變化的部分我們可以通過(guò)hover時(shí)背景圖的變化來(lái)實(shí)現(xiàn)。
首先我們要準(zhǔn)備好分析用的圖片，如下總共7張，或許有人要問(wèn)，為什么背景觸發(fā)的圖片使用一張，而不使用5張。其實(shí)部分原因大家應(yīng)該可以看出，就是以后維護(hù)的方便，修改一張圖總比修改5張圖片來(lái)的方便，其次使用5張圖瀏覽器需要加載5次，而使用1張圖瀏覽器只需要加載一次就行了。那或許有朋友要問(wèn)了，那我把2張背景圖放在一張上可以嗎？按照你上面的理論，不是更方便嗎？是的，放一張上從邏輯上是可以的，但有時(shí)候還要考慮到圖片的大小和圖片加載的速度。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 下一頁(yè) CSS實(shí)例講解:地圖提示 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) CSS實(shí)例講解:地圖提示 [1]
第 2 頁(yè) 
