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~