jQuery實(shí)現網(wǎng)站、WordPress右上角翻頁(yè)效果(2009)
在線(xiàn)播放|
搜索該片|
查看影評|
參與討論發(fā)布時(shí)間：2009年07月17日 805次瀏覽
3 comments閱讀完整文章
四種方法實(shí)現三欄等寬等高布...悄悄地，我換新皮了…...如何理解jquery中的 $(document).ready(...閑暇時(shí)間制作了一款主...且行且記...用div+css代替table進(jìn)行c#系統布...如何用div+css打造立體感陰影搜索...jquery筆記：一款圖片預覽jquery插...記錄最近的一點(diǎn)心...最近學(xué)習css的一些心...你可能在一些門(mén)戶(hù)網(wǎng)站或者是個(gè)人博客上看到過(guò)這種效果，右上角有一個(gè)類(lèi)似于我們平常翻書(shū)的效果，翻開(kāi)網(wǎng)站或者博客的右上角，頁(yè)面下方就是廣告或者是訂閱信息。這個(gè)很炫的效果看起來(lái)要通過(guò)flash來(lái)實(shí)現，不過(guò)，我打算使用jQuery技術(shù)來(lái)簡(jiǎn)單實(shí)現這個(gè)效果。
預覽 jQuery實(shí)現WordPress頁(yè)面右上角翻頁(yè)效果
1、HTML-頁(yè)面翻頁(yè)效果
“pageflip”這個(gè)”div“將扮演著(zhù)一個(gè)容器的作用，主要用來(lái)創(chuàng )建一個(gè)相關(guān)聯(lián)位置屬性。使用一張圖片和一個(gè)span標記嵌入到《a》這個(gè)超鏈接內部。注意，如果你沒(mé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 – 頁(yè)面剝離（翻頁(yè)）樣式
將圖片的高度和寬度設置成一個(gè)足夠小的值（比如高50px，寬50px），然后通過(guò)絕對定位將圖片放置在頁(yè)面的右上角。該圖片將采用類(lèi)似于photoshop中的遮罩層技術(shù)，并將一部分文字或者圖片信息隱藏起來(lái)，因此，只有很小的一部分文字或者圖片呈現在頁(yè)面上。檢查一下圖片的虛擬效果：
所有放置于翻頁(yè)效果的圖片或者文字信息都被放置于msg_block這個(gè)class里面，默認該效果將會(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”的高應該比圖片的高度相差2px，這是因為要考慮到圖片的陰影效果。
3. jQuery – Animating Page Peel
現在，我們要做的就是當鼠標移過(guò)msg_block時(shí)，展開(kāi)圖片，當鼠標離開(kāi)時(shí)恢復到原始狀態(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) });
結論：Conclusion
這篇文章非常簡(jiǎn)明扼要的講解了如何為網(wǎng)站（如WordPress）添加翻頁(yè)效果，如果在看后有任何疑問(wèn)，請不要吝嗇于讓我知道，大家共同進(jìn)步。呵呵
