html - 单击时使圆形 div 展开以填充整个页面

Question

<分区>

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/