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);
	});

});

源碼下載:地址一
發佈了74 篇原創文章 · 獲贊 43 · 訪問量 24萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章