最近都在研究javascript,CSS有點生疏了。是時候拿個東西練練手。
<dl> <dt> <a href="#index6">6</a><a href="#index5">5</a><a href="#index4">4</a><a href="#index3">3</a><a href="#index2">2</a><a href="#index1">1</a> </dt> <dd> <img id="index1" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-0.jpg" /> <img id="index2" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-1.jpg" /> <img id="index3" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-2.jpg" /> <img id="index4" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-3.jpg" /> <img id="index5" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-4.jpg" /> <img id="index6" src="https://img.php.cn/upload/article/000/000/013/e3e768bc0ad403b7acd7b90162e40116-5.jpg" /> </dd> </dl>
請原諒我的吝惜,自從谷歌相簿被牆了後,博客園相冊的那點空間真是捉襟見肘。上面的這個結構非常固定,大家死記硬背就好了。以後理想了會輕鬆些。熟行的人一眼就會看出要用到錨點。不知錨點為何物的人請自行google。 dt裡面的數字有點奇怪,是倒過來寫的,很快你們就會明白了。
經常光顧我的Blog的人可能會留意到,我運行框的HTML程式碼很簡潔,也很奇怪,與Dreamweave生成網頁模板出入很大。放心,這是經過驗證的HTML5程式碼,有沒有html,head,body等標籤都無所謂。
我先來為大家描繪相簿未來的樣子。相簿的大小與這些圖片中的一張差不多,因為我們要做出翻頁效果。它有一個邊框,不用想就是用dl的border來實現。它有一個翻頁欄,由dt實現。圖片的顯示介面由dd實現,我們可以用絕對定位把翻頁欄置於圖片的下方。圖片顯示介面每次只顯示一張圖片,多點的部分我們可以用overflow:hidden隱去。這樣一來,相簿的大小(指除去邊框部分)就是圖片的大小加翻頁欄。現在每張圖片為160 x 120,翻頁欄我設定為160 x 24(寬度相一致),換言之dl的width為160px,height為142px(我們要保證相簿呈長方形,這符合我們的生活常識。 )我們最好還能圖片設定一個2px寬的黑色邊框,因為我們固定了圖片的大小,讓超出的部分隱藏,換言之,到時右邊與下邊都會隱去。這樣與原來的大邊框並在一起時,非常有立體感,就好像圖片嵌入相簿中,外面有一塊玻璃一樣。好了,先是這麼多,翻頁欄的按鈕銷後再說,全部float:right。
dl {/*相册*/ position:relative; width:160px; height:142px; border:10px solid #EFEFDA;/*相册边框*/ } dd {/*相册的内容显示区,包含相片与下面的翻页栏*/ margin:0;/*去除浏览器的默认设置*/ padding:0;/*去除浏览器的默认设置*/ width:160px; height:120px; overflow:hidden;/*重点,让每次只显示一张图片*/ } img { border:2px solid #000;/*增加立体感*/ } dt {/*翻页栏*/ position:absolute; right:0px; bottom:0px; /*上面三步是用于把它固定于图片下方*/ width:160px; height:22px; background:#FBFBEA; } a { float:right; }
天哪,我發現我們做事太有效率了,一下子相簿就整出來,點擊連結就能切換圖片了。明白為什麼能切換圖片嗎? !如果我們沒有設定overflow:hidden,點擊圖片時網頁其實有一個上下移動的狀態發生,透過我們可以透過右邊的捲軸觀察到。這意味著什麼呢?意味著javascript的scrollTop發生作用了。 scrollTop通常為零,當其為正數時,原來可視區的東西就向下位移。如果我們固定了可視區,不顯示捲軸呢? !下面的東西怎麼才能跑到上面顯示? ?答案顯然易見,scrollTop這時變成負數。具體自己測試,按邏輯是這樣的。
我們再來看鏈接,float:right有個副作用,就是讓最左一個跑到右邊那幾個的右邊,因此我們的數字就要倒著寫。最後收尾部分很簡單,以實現ul水平選單實現就行了。為了好看,我們加上半透明效果與懸浮效果。
a { display:block;/*让其拥有盒子模型*/ float:right; margin:2px;/*错开格子*/ width:18px;/*呈正方形*/ height:18px; text-align:center;/*居中显示*/ color:#fff;/*默认是蓝色,所以一定要重写*/ text-decoration:none;/*消除下划线*/ background:#666; filter:alpha(opacity=70); opacity:.7; } a:hover { background:#000 }
成品除了翻頁欄由於圖片過小顯得有點大外,非常好看秀雅。由於火狐在實現開啟新視窗的機制有些問題,當我們點擊連結時它又跑回原來的頁面尋找對應的錨點,而不是本地視窗上的錨點。不過,放心,你們做相簿時肯定不會把它做在運行框中的。
654321