脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 顶部折页撕开

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

 更新时间：2014年06月15日 15:54:50   投稿：whsnow  
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);
});

});

相关文章

最新评论