单击圆形div展开以填充整个页面

Question

我的页面中间有一个圆形div，我希望在点击时将其展开到屏幕的完整大小。有什么建议吗？

如果可能，我希望它顺利过渡。

Answer 1

您可以使用css和javascript

div.small {
    background: #f00;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    transition: all .5s;
}

div.big {
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: 0;
    left: 0;
    margin-left: 0;
    border-radius: 0;
    background: #0f0;
}

JS（我使用zepto，但jquery是相同的）

$(window).on("click", ".small", function() {
    me = this;
    setTimeout( function() { $(me).addClass("big"); }, 1 );
});

$(window).on("click", ".big", function() {
    me = this;
    setTimeout( function() { $(me).removeClass("big"); }, 1 );
});

HTML

<div class="small"></div>

http://jsfiddle.net/frapporti/Vc492/

---

没有javascript

CSS

label {
    background: #f00;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    transition: all .5s;
}

input:checked + label {
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: 0;
    left: 0;
    margin-left: 0;
    border-radius: 0;
    background: #0f0;
}

input {
   visibility: hidden;
   position: absolute;
}

HTML

<input id="hidden-checkbox" type="checkbox"></input>
<label for="hidden-checkbox"></label>        

请参阅：http://jsfiddle.net/frapporti/85qfu/