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

QQ空间顶部折页撕开效果想必大家都有看到过吧,那么它是怎么实现的呢?下面与大家分享下

效果:

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

 
HTML:

复制代码 代码如下:


<div>
<a target="_blank" href="https://www.sparkdesign.cn/"><img src="https://www.jb51.net/js/page_flip.png"></a>
<div></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);
});

});

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgpdzj.html