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