点击这里查看原文。以往我们在一些节日的时间会在一些网站上看到一些撕页/折页的效果：即好像我们从一个右上角撕开一张贴画或者从书的右上角翻开一页纸，然后我们可以看到下面显示显示的内容。但是这种效果基本都是依靠flash来实现的，但本人所讲述的方法是通过jQuery(JS)的方法来实现的。这次先放上演示效果吧：http://yubin.com.cn/blog/demo/peeling-effect/
我们直接来结合代码结构做些讲解：
- html代码结构：
<div id="pageflip">
<a href="#">
<img src="page_flip.png" alt="" />
<span class="msg_block">Subscribe via RSS</span>
</a>
</div>
pageclip是一个容器，其用途是用来创建一个相对定位的层，以便对内部元素进行定位。在容器中是一个连接标记，其中包含一个img和一个class为msg_block的span。其中img即是我们的撕页的图片，span中即是下面显示的内容。
- 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;
}默认状态下，我们将图片的大小设置成一个50*50的大小，并定位在容器的右上角，由于撕页图片是要遮盖其它内容，因此我们将其z-index设置成一个比较大的值，这里是99。注意，这里实现撕页的图片page-flip.png比较重要，这个图片我们通过类似蒙版的技术在photoshop或flash中作处理，使得其一半内容是透明的（右上部），这样剩余部分是可以将其下面的内容遮盖住的。具体可以看下面的图示说明：
撕页下面显示的内容放置在class为msg_block的span中，我们这里是通过一个背景图来展示内容的，其默认大小也设置为50*50，定位于容器的右上角。此外，我们通过设置text-indent:-9999将span中的文本内容隐藏起来。（注：从代码可以看到span的height比img小2px，这是因为图片下部默认有一个阴影，其高度大约为2px）。 - 用jQuery来实现我们的撕页效果：
$("#pageflip").hover(function() { //鼠标放上去后
$("#pageflip img , .msg_block").stop()
.animate({ //动态修改img和span的高度
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop() //鼠标离开后，图片还原到原来的高度50*52
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop() //鼠标离开后，span还原到原来的高度50*50
.animate({
width: '50px',
height: '50px'
}, 200); //注意span的还原速度要略快于img放在在IE下出现抖动
});
这段js还是很好理解的，即：鼠标移到img上时，以动画形式将img和span都进行放大，当鼠标离开图片时，将两者再收回。
演示截图：
演示地址： http://yubin.com.cn/blog/demo/peeling-effect/
下载地址：
http://yubin.com.cn/blog/demo/peeling-effect.rar
Possibly Related Posts:
