2015-10-05 17 views
2

所以我能夠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,它的效果相同。

回答

3

如果你想要做的是讓.growme框從.box框的中心增長,而不是從屏幕的中心,你需要做的是每次你打算重置它的位置打開它。

如何做到這一點?通過使用offset()(獲取文檔中的.box的位置)和scrollTop()(以獲取滾動條的值)來計算視口內的.box元素的位置。在僞代碼,這將是這樣的:

position = element_height + element_offset - window_scroll 

一旦你的,這是非常簡單的:

  1. 更新.growme的CSS所以框開始時的水平中心:

    .growme { 
        background-color: #990000; 
        height: 0; 
        width: 0; 
        position: fixed; 
        opacity: 0; 
        top:0; 
        left:50%; 
        margin:0; 
    } 
    
  2. .growme目標位置(與上述公式):

    100 + $(this).offset().top - $(window).scrollTop() 
    
  3. .growme置於目標位置。

    $(".growme").css({ top: (100 + $(this).offset().top - $(window).scrollTop()) + "px"}); 
    
  4. 動畫.growme如此這般的左上角和它的寬度和高度佔據了100%。

    $('.growme').animate({ 
         width: '100%', 
         height: '100%', 
         left:0, 
         top:0, 
         opacity: 1, 
        }, 'normal'); 
    

這應該做的伎倆(對於收縮過程,你需要計算目標頂部的動畫,請參見下面的代碼)。下面是代碼(我評論的overflow:hidden部分,以避免視口的大小調整時滾動條消失):

$('.box').on('click', function() { 
 

 
    // set the .growme div at the center of the .box div 
 
    $(".growme").css({ top: (100 + $(this).offset().top - $(window).scrollTop()) + "px"}); 
 

 
    //$('body').css('overflow', 'hidden'); 
 
    
 
    $('.growme').animate({ 
 
    width: '100%', 
 
    height: '100%', 
 
    left:0, 
 
    top:0, 
 
    opacity: 1, 
 
    }, 'normal'); 
 
}); 
 

 
$('.growme').on('click', function() { 
 
    
 
    // calculate the target goal for the top position 
 
    var goal = (100 + $(".box").offset().top - $(window).scrollTop()) + "px"; 
 
    
 
    $(this).animate({ 
 
    width: 0, 
 
    height: 0, 
 
    left:"50%", 
 
    top: goal, 
 
    opacity: 0, 
 
    }, 'normal', function(){ 
 
    //$('body').css('overflow', 'auto'); 
 
    }); 
 
});
.growme { 
 
    background-color: #990000; 
 
    height: 0; 
 
    width: 0; 
 
    position: fixed; 
 
    opacity: 0; 
 
    top:0; 
 
    left:50%; 
 
    margin:0; 
 
} 
 
.box { 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    width: 300px; 
 
    background-color: #999; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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>

該解決方案完美的作品開始從中心日益增長的.growme DIV .box ...但有一個問題:增長與.box div不成比例,但對於視口比例,可能與.box(3x2)不一樣。

對此的一種可能的解決方案是設置.growme,以便它「模仿」.box的位置和大小。它仍然沒有成比例增長到它的大小,但它幾乎看起來就像:

$('.box').on('click', function() { 
 

 
    $(".growme").css({ top: ($(this).offset().top - $(window).scrollTop()) + "px", left: "calc(50% - 150px)", width:300, height:200, zIndex:2 }); 
 

 
    //$('body').css('overflow', 'hidden'); 
 
    $('.growme').animate({ 
 
    width: '100%', 
 
    height: '100%', 
 
    left:0, 
 
    top:0, 
 
    opacity: 1, 
 
    }, 'normal'); 
 
}); 
 

 
$('.growme').on('click', function() { 
 
    var goaltop = ($(".box").offset().top - $(window).scrollTop()) + "px"; 
 
    var goalleft = window.innerWidth/2 - 150; 
 
    $(this).animate({ 
 
    width: 300, 
 
    height: 200, 
 
    left:goalleft, 
 
    top: goaltop, 
 
    opacity: 0, 
 
    }, 'normal', function(){ 
 
    //$('body').css('overflow', 'auto'); 
 
    $(this).css("z-index",-1) 
 
    }); 
 
});
.growme { 
 
    background-color: #990000; 
 
    height: 0; 
 
    width: 0; 
 
    position: fixed; 
 
    opacity: 0; 
 
    top:50%; 
 
    left:50%; 
 
    margin:0; 
 
    z-index:-1; 
 
} 
 
.box { 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    width: 300px; 
 
    background-color: #999; 
 
    z-index:1; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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>

如果您仍然希望把它按比例增長,你可以檢查this question and the selected answer,但是請注意,在你的情況下需要額外的計算(以確定視口是否處於縱向/橫向模式並相應地執行效果)。

+0

這,我的朋友,是瘋了!剛剛好!!非常感謝你@阿爾瓦羅蒙託羅!我已經爲此編了好幾天了!你是最好的! – basagabi

0

理論上來說,它應該通過使用CSS過渡和改變盒子的寬度和高度,然後將其居中並使div保持在頁面中間...這是我的嘗試,它不是完美

看看在jsFiddle

$('.box').on('click', function() { 
 
    $('body').toggleClass('nooverflow'); 
 
    $(this).toggleClass('grow'); 
 
});
.nooverflow {overflow:hidden;} 
 

 
.box { 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    width: 300px; 
 
    position:absolute; 
 
    left:0; right:0; 
 
    background-color: #999; 
 
    transition:0.3s; 
 
} 
 
.box.grow { 
 
    width:100%; 
 
    height:100%; 
 
    background:red; 
 
    top:50%; 
 
    transform: translateY(-50%); 
 
    position:fixed; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p>

幾點考慮:

  • position:absoluteposition:fixed
  • 框中沒有平穩過渡具有絕對定位,確保不破壞你的佈局,您可能需要添加一個佔位符DIV空間保存
  • 添加跨瀏覽器的必要(過渡,變換,不透明度等)

編輯:我只是注意到,當箱子在摺疊上方時,過渡更好,但是當它低於摺疊(視口高度)時,箱子會到達中心瞬間增長

+0

謝謝@Aziz,儘管接近。是的,我同意有個'position:fixed'不會讓你順利過渡。我偶然發現了(http://tympanus.net/Blueprints/ZoomSlider/),它有我想要的相同輸出。 – basagabi

+0

沒問題,只檢查了鼓室演示,很漂亮。這篇文章解釋它 - http://tympanus.net/codrops/2015/07/06/zoom-slider/ – Aziz

+0

是的..過渡是soooo smooooth!但問題是我不會/不能使用該插件,因爲它不符合我的要求。我們只是說,我不想編輯/定製插件,只是爲了適應我的需求。這就是爲什麼我想要構建它的目的。 – basagabi

0

我已經設法完成你想要做的事情,但是我必須注意到,可能存在涉及盒子本身定位的折衷。在我的解決方案中,該框的默認位置爲fixed,因此可能會屈服於某些定位困難。

回想起來,這裏是我已經實現的代碼,它顯示了一個初始框,它具有設置寬度和高度,在點擊時向外擴展到整個頁面,並在第二次點擊時返回到默認尺寸和位置。

這是我寫的HTML代碼。

<body> 
    <div id="box"></div> 
</body> 

這是我寫的CSS代碼。

#box { 
    position: fixed; 
    width: 300px; 
    height: 200px; 
    left: 50%; 
    margin-left: -150px; 
    background-color: #999; 
} 

這是我寫的JavaScript代碼,它最困難的工作,所以我一直慷慨評論它。

// On document loaded 
$(document).ready(function() { 
    // Box starts not expanded 
    var expanded = false; 
    // On box click 
    $('#box').on('click', function() { 
    // If the box is not expanded 
    if (!expanded) { 
     // Animate the box 
     $(this).animate({ 
     // Remove horizontal centering 
     // This gives appearance of outward expansion 
     left: '0', 
     // Quotes on 'margin-left' for name errors 
     'margin-left': '0', 
     // Expand box to full page size 
     width: '100%', 
     height: '100%' 
     }); 
     // Box is now expanded 
     expanded = true; 
    } 
    // If the box is expanded 
    else { 
     // Change box to default position 
     // Animate the box 
     $(this).animate({ 
     // Restore horizontal centering 
     // This gives appearance of inward shrinking 
     left: '50%', 
     // Quotes on 'margin-left' for name errors 
     'margin-left': '-150px', 
     // Expand box to normal size 
     width: '300px', 
     height: '200px' 
     }); 
     // Box is now not expanded 
     expanded = false; 
    } 
    }); 
}); 

而且here是我創造來顯示它在行動工作一個的jsfiddle。

+0

謝謝@ Swiper-CCCVI。雖然問題是當身體內容會顯示滾動條時,div本身仍然處於固定位置。 (https://jsfiddle.net/sdy90yt5/1/)。 – basagabi

+0

就我所知,當涉及到這樣的動畫時,你不能兩面都有。如果我碰到這個問題的解決方案,我一定會讓你知道的 –