css+js实现页面翻卷
Simple Page Peel Effect with jQuery & CSS
The actual message behind the “peeling” effect, is all within the“msg_block” class. By default, it will start at 50px by 50px,positioned on the top right corner of the page. The text-indent willshoot the text off of the page for anyone with CSS enabled.
#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;z-index: 50;right: 0; top: 0;background: url(subscribe.png) no-repeat right top;text-indent: -9999px;}Note that the “msg_block” height is off by 2px compared tothe image property – this is taking in consideration of the drop shadowthat the image has.
3. jQuery – Animating Page PeelAll we are doing here is expanding the image and msg_block on hover, then retracting to its default size on hover out.
$("#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)});ConclusionThe concept is very simple and may come in handy one day. If youhave any questions or know of other techniques, please don’t hesitateto let me know~