jQuery實(shí)現(xiàn)網(wǎng)站、WordPress右上角翻頁效果(2009)
在線播放|
搜索該片|
查看影評|
參與討論發(fā)布時(shí)間：2009年07月17日 805次瀏覽
3 comments閱讀完整文章
四種方法實(shí)現(xiàn)三欄等寬等高布...悄悄地，我換新皮了…...如何理解jquery中的 $(document).ready(...閑暇時(shí)間制作了一款主...且行且記...用div+css代替table進(jìn)行c#系統(tǒng)布...如何用div+css打造立體感陰影搜索...jquery筆記：一款圖片預(yù)覽jquery插...記錄最近的一點(diǎn)心...最近學(xué)習(xí)css的一些心...你可能在一些門戶網(wǎng)站或者是個(gè)人博客上看到過這種效果，右上角有一個(gè)類似于我們平常翻書的效果，翻開網(wǎng)站或者博客的右上角，頁面下方就是廣告或者是訂閱信息。這個(gè)很炫的效果看起來要通過flash來實(shí)現(xiàn)，不過，我打算使用jQuery技術(shù)來簡單實(shí)現(xiàn)這個(gè)效果。
預(yù)覽 jQuery實(shí)現(xiàn)WordPress頁面右上角翻頁效果
1、HTML-頁面翻頁效果
“pageflip”這個(gè)”div“將扮演著一個(gè)容器的作用，主要用來創(chuàng)建一個(gè)相關(guān)聯(lián)位置屬性。使用一張圖片和一個(gè)span標(biāo)記嵌入到《a》這個(gè)超鏈接內(nèi)部。注意，如果你沒有任何相沖突的絕對或者相對定位屬性，那么，可以不用創(chuàng)建pageflip這個(gè)容器。
<div id="pageflip"> <a href="#"> <img src="page_flip.png" alt="" /> <span class="msg_block">Subscribe via RSS</span> </a></div>
2. CSS – 頁面剝離（翻頁）樣式
將圖片的高度和寬度設(shè)置成一個(gè)足夠小的值（比如高50px，寬50px），然后通過絕對定位將圖片放置在頁面的右上角。該圖片將采用類似于photoshop中的遮罩層技術(shù)，并將一部分文字或者圖片信息隱藏起來，因此，只有很小的一部分文字或者圖片呈現(xiàn)在頁面上。檢查一下圖片的虛擬效果：
所有放置于翻頁效果的圖片或者文字信息都被放置于msg_block這個(gè)class里面，默認(rèn)該效果將會(huì)是高為50px寬慰50px的圖片。
#pageflip { position: relative; } #pageflip img { width: 50px; height: 52px; z-index: 99; position: absolute; right: 0; top: 0; -ms-interpolation-mode: bicubic; } #pageflip .msg_block { width: 50px; height: 50px; position: absolute; right: 0; top: 0; background: url(subscribe.png) no-repeat right top; text-indent: -9999px; }
注意,“msg_block”的高應(yīng)該比圖片的高度相差2px，這是因?yàn)橐紤]到圖片的陰影效果。
3. jQuery – Animating Page Peel
現(xiàn)在，我們要做的就是當(dāng)鼠標(biāo)移過msg_block時(shí)，展開圖片，當(dāng)鼠標(biāo)離開時(shí)恢復(fù)到原始狀態(tài)就ok了。
$("#pageflip").hover(function() { //On hover... $("#pageflip img , .msg_block").stop() .animate({ //Animate and expand the image and the msg_block (Width + height) width: '307px', height: '319px' }, 500); } , function() { $("#pageflip img").stop() //On hover out, go back to original size 50x52 .animate({ width: '50px', height: '52px' }, 220); $(".msg_block").stop() //On hover out, go back to original size 50x50 .animate({ width: '50px', height: '50px' }, 200); //Note this one retracts a bit faster (to prevent glitching in IE) });
結(jié)論：Conclusion
這篇文章非常簡明扼要的講解了如何為網(wǎng)站（如WordPress）添加翻頁效果，如果在看后有任何疑問，請不要吝嗇于讓我知道，大家共同進(jìn)步。呵呵
