QQ空間頂部折頁撕開效果示例代碼
更新時間：2014年06月15日 15:54:50 投稿：whsnow
QQ空間頂部折頁撕開效果想必大家都有看到過吧，那么它是怎么實現(xiàn)的呢？下面與大家分享下
效果：
HTML：
<div id="pageflip">
<a target="_blank" ><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);
});
});
HTML：
復制代碼 代碼如下:
<div id="pageflip">
<a target="_blank" ><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);
});
});
相關(guān)文章
jQuery實現(xiàn)動態(tài)添加節(jié)點與遍歷節(jié)點功能示例
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加節(jié)點與遍歷節(jié)點功能,結(jié)合實例形式分析了jQuery針對頁面元素節(jié)點元素的動態(tài)添加與遍歷相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
Datatables 是一款強大的Jquery表格處理插件，樣式方面可以兼容bootstrap3/4、JqueryUi等，也有默認的樣式可以選擇。使用Datatables可以很靈活的從服務端通過ajax更新表格數(shù)據(jù)，實現(xiàn)排序、分頁等功能2020-01-01
本篇文章主要是對jquery中l(wèi)oad方法的用法及注意事項進行了詳細介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
下面小編就為大家?guī)硪黄獙ο蟛恢С謎ndexOf屬性或方法的解決方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
jQuery實現(xiàn)仿QQ空間裝扮預覽圖片的鼠標提示效果代碼
這篇文章主要介紹了jQuery實現(xiàn)仿QQ空間裝扮預覽圖片的鼠標提示效果代碼,基于jQuery鼠標事件動態(tài)操作頁面元素樣式的動態(tài)變換實現(xiàn)該功能,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了Jquery使我們簡化了禁止冒泡事件的操作，只需幾行代碼,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了高效Web開發(fā)的10個jQuery代碼片段，具有一定的實用性和參考價值，感興趣的小伙伴們可以參考一下2016-07-07
本文講述的是jquery選擇器結(jié)果是數(shù)組時需要主要的一個問題，并詳細分析了產(chǎn)生此問題的原因，這里記錄下來，小伙伴們在項目中使用的時候要注意一下。2014-11-11
filter() 方法返回符合一定條件的元素。該方法讓您規(guī)定一個條件。不符合條件的元素將從選擇中移除，符合條件的元素將被返回。這篇文章主要介紹了 jquery的 filter()方法使用,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了jQuery設(shè)置圖片等比例縮小的方法,涉及jQuery針對頁面元素屬性動態(tài)判定與設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2017-04-04