所以我能夠expand the div from the center of viewport但現在我想擴大開始爲「點擊我」框創建一個效果/錯覺,一個盒子來自它增長所有通往中心視口的方式。將div從父div展開到中心視口
它應該跟隨點擊我框,比如讓我們說點擊我框在頂部,當用戶點擊它時,它應該從頂部進入,然後長到中央視口。
這是jsFiddle以及JSFiddle的示例代碼。 (請注意,<p>
只是顯示的內容,會使人體有一個滾動條)
HTML
<div class="growme">test</div>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<div class="box"><h3>click me</h3></div>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
CSS
.growme {
background-color: #990000;
height: 0;
width: 0;
position: fixed;
filter: alpha(opacity=0);
opacity: 0;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
.box {
margin: 0 auto;
height: 200px;
width: 300px;
background-color: #999;
}
jQuery的
$('.box').on('click', function() {
$('body').css('overflow', 'hidden');
$('.growme').animate({
width: '100%',
height: '100%',
opacity: 1,
}, 'normal');
});
$('.growme').on('click', function() {
$(this).animate({
width: 0,
height: 0,
opacity: 0,
}, 'normal', function(){
$('body').css('overflow', 'auto');
});
});
如果您想知道輸出結果會是什麼樣子,我可以找到this site,它的效果相同。
這,我的朋友,是瘋了!剛剛好!!非常感謝你@阿爾瓦羅蒙託羅!我已經爲此編了好幾天了!你是最好的! – basagabi