即时创建使用jQuery和JavaScript,(在net.magazine公布的代码) ,但在我的下一个步骤,试图调整此网络到不同的设备(使用媒体查询.etc) 我面临一个问题 即时通讯设法检测窗口大小(我的笔记本电脑屏幕尺寸是1024 x 768) ,我同时获得窗口和文档宽度/高度相同的结果= 737x402!?为什么? 是否因为scale onload不是全屏?如何重置窗口宽度和窗口比例onload?
<div id=wrap>
<div id=container>
<div id=content>
<div class=section id=first ></div>
<div class=section id=second ></div>
</div>
</div>
</div>
<div id=scroller ></div>
的CSS
body{
margin: 0;
padding: 0;
}
#wrap {
position: fixed;
width: 100%;
}
#scroller {
height: 1500px;
}
#container {
position: relative;
top:-57px;
margin:0 auto;
width: 1070px;
height: 665px;
}
#content {
height: 665px;
position: absolute;
width: 100%;
}
#front-first {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
background: url(images/pic1.jpg) no-repeat;
background-size:70%;
position: absolute;
z-index:20;
display: block;
width: 1070px;
height: 665px;
margin: 0 auto;
}
#front-second {
-webkit-transform: scale(0.3333);
-moz-transform: scale(0.3333);
-o-transform: scale(0.3333);
transform: scale(0.3333);
background: url(images/pic2.jpg) no-repeat;
background-size:70%;
position: absolute;
z-index:20;
display: block;
width: 1070px;
height: 665px;
margin: 0 auto;
}
<script>
$(document).ready(function(){
browserWindowheight = $(window).height();
alert(browserWindowheight);
browserWindowwidth = $(window).width();
alert(browserWindowwidth);
function Zoomer(content) {
this.content = content;
this.scrolled = 0;
this.levels = 4;
this.docHeight = document.documentElement.offsetHeight;
// bind Zoomer to scroll event
window.addEventListener('scroll', this, false);
}
Zoomer.prototype.handleEvent = function(event) {
if(this[event.type]) {
this[event.type](event);
}
};
Zoomer.prototype.scroll = function(event) {
this.scrolled = window.scrollY/(this.docHeight - window.innerHeight);
};
Zoomer.prototype.scroll = function(event) {
this.scrolled = window.scrollY/(this.docHeight - window.innerHeight);
var scale = Math.pow(3, this.scrolled * this.levels), transformValue = 'scale(' + scale + ')';
this.content.style.WebkitTransform = transformValue;
this.content.style.MozTransform = transformValue;
this.content.style.OTransform = transformValue;
this.content.style.transform = transformValue;
};
function init() {
var content = document.getElementById('content'),
// init Zoomer constructor
ZUI = new Zoomer(content);
}
window.addEventListener('DOMContentLoaded', init, false);
});
<script>
</html>
谢谢:)但我仍然得到同样的结果740X400不知道为什么 – tali 2012-07-31 05:11:23