QQ空间顶部折页撕开效果示例代码

295 阅读 0 评论 195 点赞

我是靠谱客的博主善良手链，这篇文章主要介绍QQ空间顶部折页撕开效果示例代码，现在分享给大家，希望可以做个参考。

效果：

HTML：

复制代码代码如下:

 
<div id="pageflip"> 
<a target="_blank" href="http://www.sparkdesign.cn/"><img width="307" height="319" src="js/page_flip.png" style="overflow: hidden; width: 50px; display: block; height: 52px;"></a> 
<div class="msg_block" style="overflow: hidden; width: 50px; display: block; height: 50px;"></div> 
</div> 

JS：

复制代码代码如下:

 
$(document).ready(function(){ 

$("#pageflip").hover(function(){ 
$("#pageflip img , .msg_block").stop().animate({width: '307px', height: '319px'}, 500); 
},function(){ 
$("#pageflip img").stop().animate({width: '50px', height: '52px'}, 220); 
$(".msg_block").stop().animate({width: '50px', height: '50px'}, 200); 
}); 

}); 