javascript - Zooming out / In only visible area of website

Question

I'm trying to implement the Zooming out/in(browser) only on visible area of website exactly like site http://halfcreative.themes.bitfade.com/. When you zoom out or in, only visible area zooms in or out. I googled for it but didn't find the answer. Any idea how to do this?

Answer 1

你是说这个效果？检查演示http://jsfiddle.net/bJnCV/

HTML

<div id="home">
    <h1>Site Name</h1>
    <p>This is slogan</p>
</div>

查询

$(document).ready(function(){
    $('#home').css({'width':$(window).width(),'height':$(window).height()});    
});
$(window).resize(function() {
    $('#home').css({'width':$(window).width(),'height':$(window).height()});
});

Answer 2

看看网站的 CSS。(min-)height: 100%;是一个关键字。

header {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #FFF;
  position: absolute;
  background: rgba(0, 0, 0, 0) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  min-width: 100%;
  min-height: 100%;
}