不多说先看效果图
demo地址:http://www.sohtanaka.com/web-design/examples/peeling-effect/
1. HTML - 折页框
<div id="pageflip">
<a href="#">
<img src="page_flip.png" alt="" />
<span class="msg_block">Subscribe via RSS</span>
</a>
</div>
2. CSS - 定义样式
#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; }
3. jQuery - 制作动态效果
$("#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) });
4.完成:)